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国 配备 光盘 : 

包含 了 大 量 相关 素材 及 85 个 视频 教学 文件 ， 使 学 习 更 加 轻松 、 方 便 。 
图 实用 性 强 : 

专业 设计 师 及 教学 专家 倾 力 奉献 ， 案 例 全 部 来 源 于 工作 一 线 与 教学 实践 。 
国 内 容 全 面 : 

涵盖 CSS、DIV、Javascript、HTML5、ASP、Dreamweaver、Flash、Photoshop。 
国 体系 完善 : 
包括 网 站 基础 、 色 彩 搭配 、 文 本 、 图 像 、 特 效 、 表 格 、 模 板 、 库 、 插 件 等 。 
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图 2-20 色彩 的 鲜明 性 


图 2-21 色彩 的 适合 性 -26 补 色 对 比 
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内 容 简介 


全 书 共 19 章 ， 讲 述 了 网 页 制作 与 网 站 建设 方方面面 的 知识 。 主 要 内 容 包括 网 站 建设 基础 、 网 页 的 色彩 
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网 页 基础 、HTML5 入 门 基础 、 动 态 网 站 设计 基础 、 动 态 网 站 开发 语言 ASP、 快 速 掌握 动画 设计 软件 Flash 
CC、 编 辑 文本 和 操作 对 象 、 创 建 基 本 Flash 动 画 、Photoshop CC 入 门 基础 、 网 页 特效 文字 的 制作 、 网 页 切片 
输出 与 动画 制作 、 设 计 企 业 网 站 实例 。 
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如 今 ， 互 联网 已 经 在 人 们 的 生活 中 占据 了 重要 位 置 ， 互 联网 可 以 将 大 量 丰 富 多 彩 的 文本 、 图 
像 、 动 画 等 结合 起 来 ， 随 时 随地 供用 户 浏览 。 目 前 网 页 设计 与 网 站 建设 技术 成 了 热门 。 页 面 设计 、 
动画 设计 、 图 形 图 像 设计 是 网 页 设计 与 网 站 建设 的 三 大 核心 。 随 着 网 站 技术 的 发 展 ， 各 方面 对 网 站 
开发 技术 的 要 求 日 益 提高 ， 人 才 市 场 上 对 网 站 开发 工作 人 员 的 需求 大 大 增加 。 但 是 网 站 建设 是 一 门 
综合 性 的 技能 ， 对 很 多 计算 机 技术 都 有 很 高 的 要 求 。 网 站 开发 工作 包括 市 场 需求 研究 、 网 站 策划 、 


网 页 图 像 设 计 、 网 页 页 面 排 版 、 网 页 动画 设计 、 动 态 网 站 开发 、 网 站 的 推广 运作 等 知识 。 能 够 系统 
掌握 这 些 知识 的 网 页 设计 师 相对 较 少 。 市场 上 虽然 有 不 少 网 页 制作 设计 的 图 书 ， 但 是 很 多 都 是 纯粹 
地 讲解 Dreamweaver、Flash、Photoshop 等 网 页 设计 软件 的 使 用 方法 ， 对 于 网 站 建设 的 全 部 过 程 和 知 
识 没 有 讲述 ， 因 此 基于 网 页 制作 与 网 站 建设 人 才 的 需求 ， 我 们 编写 了 本 书 。 


本 书 主要 内 容 


本 书 详细 介绍 了 如 何 进行 网 站 的 前 期 策划 ， 如 何 综合 使 用 Dreamweaver CC、Photoshop CC 和 
Flash CC 等 工具 来 建设 网 站 ， 如 何在 ASP 环 境 下 建设 动态 网 站 ， 以 及 数据 库 的 创建 、 网 站 的 推广 与 
宣传 等 内 容 。 

全 书 共 19 章 ， 讲 述 了 网 页 制作 与 网 站 建设 方方面面 的 知识 。 主 要 内 容 包 括 网 站 建设 基础 、 网 页 
的 色彩 搭配 、Dreamweaver CC 创建 站 点 和 基本 网 页 、 添 加 图 像 和 媒体 、 使 用 表格 轻松 排列 网 页 数 
据 、 使 用 模板 和 库 以 及 插件 提高 网 页 制作 效率 、 使 用 CSS+DIV 布 局 美化 网 页 、 使 用 行为 和 JavaScript 
点 缀 网 页 特效 、 利 用 表单 对 象 创建 表单 文件 、HTML5 入 门 基础 、 动 态 网 站 设计 基础 、 动 态 网 站 
开发 语言 ASP、 快 速 掌握 动画 设计 软件 Flash CC、 编 辑 文本 和 操作 对 象 、 创 建 基 本 Flash 动 画 、 
Photoshop CC 入 门 基础 、 网 页 特效 文字 的 制作 、 网 页 切片 输出 与 动画 制作 、 设 计 企 业 网 站 实例 。 


本 书 主要 特点 


本 书 作者 具有 多 年 网 站 设计 与 教学 经 验 ， 精 选 了 多 年 设计 中 具有 代表 性 和 实用 性 的 实例 ， 拒 
绝 脱离 实际 的 单纯 软件 讲解 ， 以 实用 案例 贯穿 全 书 ， 让 读者 在 学 会 软件 的 同时 迅速 掌握 实际 应 用 能 
力 。 每 个 案例 都 有 详细 的 制作 步骤 ， 且 阐述 了 制作 关键 点 和 应 用 知识 点 ， 帮 助 读者 巩固 能 力 和 进 一 
步 提 高 自己 的 水 平 。 
友 本 书 的 最 大 特点 是 不 同 于 以 往 的 图 书 完全 讲解 软件 知识 ， 本 书 以 网 页 制作 与 网 站 建设 为 主线 ， 讲 述 
网 页 制作 与 网 站 建设 方方面面 的 知识 ， 涵 羡 了 众多 优秀 网 页 设计 师 的 宝 泪 实战 经 验 ， 以 及 丰富 的 创 
作 灵 感 和 设计 理念 。 
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六 ”典型 实例 讲解 。 本 书 使 用 了 大 量 的 典型 商业 网 站 案例 ， 将 各 章 的 基础 知识 综合 员 穿 起 来 ， 力 求 达到 
理论 知识 与 实际 操作 完美 结合 的 效果 。 

妈 ”结构 完整 。 本 节 以 实用 功能 讲解 为 核心 ， 每 小 节 分 为 基本 知识 学 习 和 实战 两 部 分 ， 基 本 知识 学 习 部 
分 以 基本 知识 为 主 ， 讲 解 每 个 知识 点 的 操作 和 用 法 ， 操 作 步 又 详细 ， 目 标明 确实 战 部 分 则 相当 于 
一 个 学 习 任务 或 案例 制作 。 

友 习题 强化 。 每 章 后 都 附 有 针对 性 的 练习 题 ， 读 者 可 通过 实 训 巩 固 每 章 所 学 的 知识 。 


本 书 读者 对 象 

本 书 适用 于 以 下 读者 对 象 。 

(1) 网 页 设计 与 制作 人 员 。 

(2) 网 站 建设 与 开发 人 员 。 

(3) 大 中 专 院 校 相关 专业 师 生 。 

(4) 网 页 制作 培训 班 学 员 。 

(5) 个 人 网 站 爱好 者 与 自学 读者 。 

本 书 由 国内 著名 网 页 设计 培训 专家 王 彩 梅 主笔 ， 参 与 编写 的 还 包括 冯 雷 雷 、 晃 辉 、 陈 石 送 、 何 
琛 、 吴 秀 红 、 王 冬 霞 、 何 本 军 、 乔 海 丽 、 邓 仰 伟 、 孙 雷 杰 、 孙 文 记 、 何 立 、 倪 庆 军 、 胡 秀 娥 、 赵 良 
涛 、 徐 暴 、 刘 桂香 、 葛 俊 科 、 葛 俊 彬 等 。 由 于 作者 水 平 有 限 ， 加 之 创作 时 间 仓 促 ， 书 中 不 足 之 处 在 
所 难免 ， 欢 迎 广大 读者 批评 指正 。 
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第 1 章 
网 站 建设 基础 


本 章 导 读 
上 网 已 成 为 当今 人 们 的 一 种 新 的 生活 方 
式 。 通 过 互联 网 ， 用 户 足 不 出 户 就 可 以 浏览 全 世 
界 的 信息 。 网 站 也 成 为 了 每 个 公司 必 不 可 少 的 宣 
传媒 介 。 互 联网 的 迅速 发 展 ， 使 得 网 页 设计 越 来 
越 重要 ， 设 计 师 要 制作 出 更 出 色 的 网 站 ， 就 需要 
熟悉 网 站 建设 的 基础 知识 。 


技术 要 点 
预备 知识 
如 何 设 计 网 页 
掌握 常用 的 网 页 设计 软件 
掌握 网 站 建设 的 一 般 流程 


ET 识 尝 实录 。。 一 全 


| .| = 


在 具体 学 习 网 页 设计 与 制作 前 ， 先 来 认识 一 下 什么 是 网 站 ， 了 解 什么 
是 网 站 的 域名 和 空间 的 申请 ， 为 以 后 的 学 习 打 好 基础 。 


用 1.1.1 什么 是 网 站 

WWW 是 环球 信息 网 的 缩写 ， 中 文 名 字 为 “万 维 网 ”， 常 简称 为 Web。WWW 可 以 让 Web 客 
户 端 〈 常 用 浏览 器 ) 访问 浏览 Web 服 务 器 上 的 页 面 ， 是 一 个 由 许多 互相 链接 的 超 文本 组 成 的 系 
统 ， 通 过 互联 网 访问 。 

网 站 是 在 Intemet 上 通过 超级 链接 的 形式 构成 的 相关 网 页 的 集合 。 简 单 地 说 ， 网 站 是 一 种 通 
信 工 具 ， 就 像 布 告 栏 一 样 ， 人 们 可 以 通过 网 站 来 发 布 自己 想 要 公开 的 信息 ， 或 者 利用 网 站 来 提 
供 相关 的 网 上 服务 。 通 过 网 站 ， 人 们 可 以 浏览 、 获 取信 息 。 许 多 公司 都 拥有 自己 的 网 站 ， 他 们 
利用 网 站 来 进行 宣传 、 产 品 资讯 发 布 、 招 聘 人 才 等 。 在 因特网 的 早期 ， 网 站 大 多 只 是 单纯 的 文 
本 。 经 过 几 年 的 发 展 ， 当 万 维 网 出 现 之 后 ， 图 像 、 声 音 、 动 画 、 视 频 ， 甚 至 3D 技 术 开 始 在 因 特 
网 上 流行 起 来 ， 网 站 也 慢 慢 地 发 展 成 我 们 现在 看 到 的 图 文 并 茂 的 样子 。 通 过 动态 网 页 技术 ， 用 
户 也 可 以 与 其 他 用 户 或 者 网 站 管理 者 进行 交流 。 

网 站 由 域名 、 服 务 器 空间 、 网 页 3 部 分 组 成 。 网 站 的 域名 就 是 在 访问 网 站 时 在 浏览 器 地 址 
栏 中 输入 的 网 址 。 网 页 是 通过 Dreamweaver 等 软件 编辑 出 来 的 ， 多 个 网 页 由 超级 链接 联系 起 
来 。 然 后 网 页 需要 上 传 到 服务 器 空间 中 ， 供 浏览 器 访问 网 站 中 的 内 容 。 


个 1.1.2 ”申请 域名 
网 站 的 域名 就 是 在 访问 网 站 时 在 浏览 器 地 址 栏 中 输入 的 网 址 。 

一 个 网 站 必须 有 一 个 世界 范围 内 唯一 可 访问 的 名 称 ， 这 个 名 称 还 可 方便 地 书写 和 记忆 ， 

这 就 是 网 站 的 域名 。 域 名 对 于 开展 电子 商务 具有 重要 的 作用 ， 它 被 誉 为 网 络 时 代 的 “环球 商 

标 ”， 一 个 好 的 域名 会 大 大 增加 企业 在 互联 网 上 的 知名 度 。 因 此 ， 企 业 如 何 选取 好 的 域名 就 显 

得 十 分 重要 。 

从 网 络 体系 结构 上 来 讲 ， 域 名 是 域名 管理 系统 (Domain Name System，DNS) 进行 全 球 统 

一 管理 的 ， 用 来 映射 主机 IP 地 址 的 一 种 主机 命名 方式 。 例 如 ， 百 度 的 域名 是 www.baidu.com， 

在 浏览 器 地 址 栏 中 输入 www.baidu.com 时 ， 计 算 机 会 把 这 个 域名 指向 相对 应 的 卫 地 址 。 同 样 ， 

网 站 的 服务 器 空间 会 有 一 个 IP 地 址 ， 还 需要 申请 一 个 便于 记忆 的 域名 指向 这 个 IP 地 址 以 便 

访问 。 

1. 域名 选取 原则 
在 选取 域名 的 时 候 ， 首 先 要 遵循 两 个 基本 原则 。 

友 域名 应 该 简明 易 记 ， 便 于 输入 。 这 是 判断 域名 好 坏 最 重要 的 因素 。 一 个 好 的 域名 应 该 短 而 
顺口 ， 便 于 记忆 ， 最 好 让 人 看 一 眼 就 能 记 住 ， 而 且 读 起 来 发 音 清晰 ， 不 会 导致 拼写 错误 。 
此 外 ， 域 名 选取 还 要 避免 同音 异 义 词 。 

太 ”域名 要 有 一 定 的 内 涵 和 意义 。 用 有 一 定 意义 和 内 涵 的 词 或 词组 作 域名 ， 不 但 可 以 帮助 记 
忆 ， 而 且 有 助 于 实现 企业 的 营销 目标 。 如 企业 的 名 称 、 产 品名 称 、 商 标 名 、 品 牌 名 等 都 是 
不 错 的 选择 ， 这 样 能 够 使 企业 的 网 络 营销 目标 和 非 网 络 营销 目标 达成 一 致 。 
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ee i 关机 构 统一 管理 的 。 有 很 多 网 络 公司 可 以 代 
了 ; 理 域名 的 注册 业务 ， 可 以 直接 在 这 些 网 络 公 


1 | | 司 注册 一 个 域名 。 注 册 域名 时 ， 需 要 找到 服 
1 大 用 企业 名 称 相应 的 英文 名 作为 城 名 。 和 

UW 〗 | ”可 以 在 搜索 引擎 上 查找 到 域名 代理 商 ， 如 
上 文 用 汉语 拼音 的 谐音 形式 给 企业 注册 域名 。 上 | 图 1-1 所 示 ， 可 以 在 百度 中 查找 域名 代理 商 。 

上 和 以 中 英文 结合 的 形式 给 企业 注册 域名 。 1 : ”在 百度 中 打开 中 国 万 网 的 网 站 (http:// 
1 入 在 企业 名 称 前 后 加 上 与 网 络 相 关 的 前 缓和 上 : www.net.cn) ， 在 这 里 可 以 申请 注册 域名 ， 如 
1 后 级 。 1 | 图 1-2 所 示 。 

上 类 用 与 企业 名 不 同 但 有 相关 性 的 词 或 词组 作 上 有 | [一 

1 域名。 | | Bs 

上 太 不 要 注册 其 他 公司 拥有 的 独特 商标 名 和 国际 有 

1 知名 企业 的 商标 名 。 1 
[| : 

2， 网 站 域名 类 型 


一 个 域名 是 分 为 多 个 字段 的 ， 如 www. 
sina.com.cn， 这 个 域名 分 为 4 个 字段 。cn 是 一 : 
个 国家 字段 ， 表 示 域 名 是 中 国 的 ，com 表 示 域 | 
名 的 类 型 ， 表 示 这 个 域名 是 公共 服务 类 的 域 | 
名 ，www 表 示 域 名 提供 www 网 站 服务 ，sina | -一 一 一 
表示 这 个 域名 的 名 称 。 域 名 中 的 最 后 一 个 字 | 人 
段 ， 一 般 是 国家 字段 。 表 1-1 为 一 些 常见 的 域 | 吐 本 
名 后 级 类 型 。 对 于 .gov 政 府 域名 、.edu 教 育 域 
名 等 类 型 的 域名 ， 需 要 这 些 有 相关 资质 的 机 | 医 
构 提供 有 效 的 证 明 材料 才 可 以 申请 和 注册 。 ;| 


表 1-1 常用 的 域名 字段 国医 = op 
om cry 
net 网 络 服务 机 构 域名 ee 
me 和 | 
‘gov 政府 机 构 :| | 
教育 机 构 图 1-2 在 万 网 申请 注册 域名 
-info 信息 和 信息 服务 机 构 : 
-name 个 人 专用 域名 | | 1.1.3 申请 服务 器 空间 
ty 电视 媒体 域名 | 访问 网 站 的 过 程 实际 上 就 是 用 户 计算 机 
a sha ea ”和 服务 器 进行 数据 连接 和 数据 传递 的 过 程 ， 
本 学 小 全 鬼城 名 ; 这 就 要 求 网 站 必须 存放 在 服务 器 上 才能 被 访 
ES 商业 公司 | 问 。 一 般 的 网 站 ， 不 是 使 用 一 个 独立 的 服务 
商业 机 构 关 名 器 ， 而 是 在 网 络 公司 租用 一 定 大 小 的 储存 空 
obi | 手机 和 移动 网 站 域名 ， 间 来 支持 网 站 的 运行 。 这 个 租用 的 网 站 存储 
3. 申请 域名 ; 空间 就 是 服务 器 空间 。 图 1-3 所 示 为 在 万 网 申 


域名 是 由 国际 域名 管理 组 织 或 国内 的 相 | 请 服务 器 空间 。 


课堂 实录 “ee 一 全 
1. 为 什么 要 申请 服务 器 空间 

一 个 小 的 网 站 直接 放 在 独立 
的 服务 器 上 是 不 实际 的 ， 实 现 方 
法 是 在 商用 服务 器 上 租用 一 块 服 
务 器 空间 ， 每 年 定期 支付 很 少 的 
服务 器 租用 费 ， 即 可 把 自己 的 网 
站 放 在 服务 器 上 运行 。 租 用 了 服 
务 器 空间 ， 用 户 只 需要 管理 和 更 
新 自己 的 网 站 ， 服 务 器 的 维护 和 
管理 则 由 网 络 公司 完成 。 

在 租用 服务 器 空间 时 需要 
选择 服务 较 好 的 网 络 公司 。 好 的 
服务 器 空间 运行 稳定 ， 很 少 出 现 
服务 器 停机 现象 ， 有 很 好 的 访问 


速度 和 售后 服务 。 某 些 测试 软件 辣 昌 :Rs :Ra 
可 以 方便 地 测 出 服务 器 的 运行 束 a a es 
度 。 新 网 、 万 网 、 中 资源 等 公司 sg | 
的 服务 器 空间 都 有 很 好 的 性 能 和 : 


售后 服务 。 

在 网 络 公司 主页 注册 一 个 用 
户 名 并 登录 后 ， 即 可 购买 服务 器 
空间 。 在 购买 时 需要 选择 空间 的 到 在 页 同 秆 请 刷 条 器 安 间 
大 小 和 支持 程序 的 类 型 。 
2. 服务 器 空间 的 类 型 

不 同 服务 器 空间 的 主要 区 别 是 支持 网 站 程序 和 支持 数据 库 的 不 同 。 常 用 的 服务 器 空间 可 能 
分 别 支持 下 面 这 些 不 同 的 网 站 程序 。 
ASP: 使 用 Windows 系 统 和 IIS 服 务 器 。 
PHP: 使 用 Linux 系 统 或 Windows 系 统 ， 使 用 Apache 网 站 服务 器 。 
.NET: 使 用 Windows 系 统 和 IIS 服 务 器 。 
JSP: 使 用 Windows 系 统 和 Java 的 网 站 服务 器 。 
不 同 的 服务 器 空间 可 能 支持 不 同 的 数据 库 ， 常 用 的 服务 器 空间 支持 的 数据 库 有 以 下 几 种 。 
Access: 常用 于 ASP 网 站 。 
SQL Server 2000: 常用 于 ASP 网 站 或 .NET 网 站 。 
MySQL 数 据 库 常用 于 PHP 或 JSP 网 站 。 
Oracle 数 据 库 常用 于 JSP 网 站 。 
在 注册 服务 器 空间 时 ， 需 要 选择 支持 自己 网 站 程序 与 数据 库 的 服务 器 空间 。 例 如 ， 本 书 中 
开发 的 程序 是 ASP 程 序 ， 需 要 选择 ASP 空 间 。 同 时 ， 需 要 注意 服务 器 空间 的 大 小 ，100MB 的 空 
间 即 可 存放 一 般 的 网 站 。 

网 站 的 域名 与 服务 器 空间 是 需要 每 年 按时 续费 的 。 用 户 需要 按 网 络 公司 规定 的 方式 进行 续 
费 。 域 名 和 空间 不 可 以 欠 费 ， 如 果 欠 费 ， 管 理 部 门 会 收回 这 个 域名 和 空间 ， 如 被 其 他 用 户 再 次 
注册 以 后 就 很 难 再 注册 到 这 个 域名 ， 也 可 能 导致 自己 网 站 的 数据 丢失 。 


对 对 对 对 


对 对 对 对 


] @ 2 网 页 设计 是 一 


只 是 设计 的 手段 ， 而 并 非 设计 的 任务 
旧 1.2.1 ”网 页 设计 的 任务 


0 ， 是 
主题 和 实现 的 功能 。 


以 下 3 类 。 


分 割 、 
等 问题 。 

第 二 类 是 资讯 和 形象 相 
像 一 些 较 大 的 公司 、 


结构 的 合理 、 页 面 的 优化 、 界 面 的 亲 和 


相 结 合 的 网 站 ， 


且 1.2.2 ”网 页 设计 的 实现 

设计 的 实现 可 以 分 为 两 个 部 分 。 第 一 部 
分 为 站 点 的 规划 及 草图 的 绘制 ， 这 一 部 分 可 
以 在 纸 上 完成 。 第 二 部 分 为 网 页 的 制作 ， 
一 过 程 是 在 计算 机 上 完成 的 。 


文字 、 图 像 乃 至 动画 ， 要 以 最 适合 


用 1.2.3 ”网 页 设计 的 基本 原则 


设计 是 有 原则 的 ， 无 论 使 用 何 种 手法 对 画 | 


面 中 的 元 素 进行 组 合 ， 都 一 定 要 遵循 五 个 大 的 
原则 ， 统一、 连贯 分割、 对 比 及 和 漠 
统一 : 是 指 设计 作品 的 整体 性 ， 一 致 . 


性 。 设 计 作品 的 整体 效果 是 至 关 重要 的 ， 在 


使 画面 呈现 出 一 种 枝 蔓 纷 杂 的 凌乱 效果 。 
连贯 : 是 指 要 注意 页 面 的 相互 关系 。 


站 设计 者 要 表现 的 | 
站 点 的 性 质 不 同 ， 设 计 | 
的 任务 也 不 同 。 从 形式 上 ， 可 以 将 站 点 分 为 | 


第 一 类 是 资讯 类 站 点 ， 像 新 浪 、 网 易 、 搜 ， 
狐 等 门户 网 站 。 这 类 站 点 将 为 访问 者 提供 大 量 } 
的 信息 ， 而 且 访问 量 较 大 。 因 此 需 注意 页 面 的 | 
| 站 对 设计 者 的 美工 水 平 要 求 较 高 。 


”还 要 具体 分 析 。 不 同 的 站 点 还 要 
国内 的 高 校 等 。 这 类 网 | 
站 在 设计 上 要 求 较 高 ， 既 要 保证 资讯 类 网 站 | 


| 为 现实 ， 最 终 的 集成 一 般 是 在 Dreamweaver 里 
| 完成 的 。 虽然 在 草图 上 ， 定 出 了 页 面 的 大 体 轮 
这 | 廓 ， 但 是 灵感 一 般 都 是 在 制作 过 程 中 产生 的 。 

| 设计 一 定 要 有 创意 ， 

设计 网 页 的 第 一 步 是 设计 版 面 布局 。 可 以 | 
将 网 页 看 作 传统 的 报刊 杂志 来 编辑 ， 这 里 面 有 ; 
的 方式 将 图 ; 
片 和 文字 排放 在 页 面 的 不 同位 置 。 常 用 的 网 页 | 
设计 软件 是 Dreamweaver、Fireworks、Flash 及 : 
Photoshop， 这 些 都 是 很 不 错 的 软件 。 接 下 来 | 
要 做 的 就 是 通过 软件 的 使 用 ， 将 设计 的 蓝图 变 | 
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如 何 设计 网 页 0 


种 审美 活动 ， 成 功 的 设计 作品 一 
。 设 计 的 任务 是 要 实现 设计 者 的 意图 ， 而 并 非 创 造 美 。 


般 都 很 艺术 化 。 但 艺术 


的 上 述 要 求 ， 同 时 又 要 突出 企业 、 单 位 的 形 
象 。 然 而 就 现状 上 来 看 ， 这 类 网 站 有 粗 制 小 
造 的 嫌疑 
第 三 类 则 是 形象 类 网 站 ， 比 如 一 些 中 小 
到 的 公司 或 单位 。 这 类 网 站 一 般 较 小 ， 有 的 
则 有 几 页 ， 需 要 实现 的 功能 也 较为 简单 ， 网 


页 设计 的 主要 任务 是 突出 企业 形象 。 这 类 网 


当然 ， 这 只 是 从 整体 上 来 看 ， 具 体 情况 
区 别 对待 。 
别 忘 了 最 重要 的 一 点 ， 那 就 是 客户 的 要 求 

它 也 属于 设计 的 任务 。 


这 是 最 基本 的 要 求 ， 没 有 
创意 的 设计 是 失败 的 。 在 制作 的 过 程 中 ， 会 碰 
到 许多 问题 ， 其 中 最 敏感 的 莫 过 于 页 面 的 颜色 
了 。 可 先 确定 一 种 能 表现 主题 的 主体 色 ， 然 后 
根据 具体 的 需要 ， 应 用 颜色 的 近似 和 对 比 来 完 
成 整个 页 面 的 配色 方案 。 整 个 页 面 在 视觉 上 应 
是 一 个 整体 ， 以 达到 和 谐 、 悦 目的 视觉 效果 。 


设计 中 应 利用 各 组 成 部 分 在 内 容 上 的 内 在 联 


; 系 和 表现 形式 上 的 相互 呼应 ， 并 注意 整个 页 
i 面 设计 风格 的 一 致 性 ， 实 现 视觉 上 和 心理 上 


的 连贯 ， 使 整个 页 面 设计 的 各 个 部 分 极为 融 


| 洽 ， 犹 如 一 气 呵 成 。 
设计 中 切 勿 将 各 组 成 部 分 孤立 分 散 ， 那 样 会 | 


分 割 : 是 指 将 页 面 分 成 若干 小 块 ， 小 块 


之 间 有 视觉 上 的 不 同 ， 这 样 可 以 使 观 者 一 目 
| 了 然 。 在 信息 量 很 多 时 ， 为 使 观 者 能 够 看 清 


CEITEEIDETEE 识 堂 闫 录 。。 一 全 


楚 ， 就 要 注意 到 将 画面 进行 有 效 的 分 割 。 分 割 不 仅 是 表现 形式 的 需要 。 换 个 角度 来 讲 ， 分 割 也 
可 以 被 视 为 对 于 页 面 内 容 的 一 种 分 类 归纳 。 

对 比 : 是 通过 矛盾 和 冲突 ， 使 设计 更 加 富有 生气 。 对 比 手法 很 多 ， 例 如 : 多 与 少 、 
直 、 强 与 弱 、 长 与 短 、 粗 与 细 、 朴 与 密 、 虚 与 实 、 主 与 次 、 黑 与 白 、 动 与 静 、 美 与 丑 、 聚 与 散 
等 。 在 使 用 对 比 的 时 候 应 慎重 ， 对 比 过 强 容易 破坏 美感 ， 影 响 统一 

和 谐 : 指 整个 页 面 符合 美的 法 则 ， 浑 然 一 体 。 如 果 一 件 设计 作品 仅仅 是 色彩 、 形 状 、 线 条 
等 的 随意 混合 ， 那 么 作品 将 不 但 没有 “生命 感 ”， 而 且 也 根本 无 法 实现 视觉 设计 的 传达 功能 。 
和 谐 不 仅 要 看 结构 形式 ， 而 且 要 看 作品 所 形成 的 视觉 效果 能 否 与 人 的 视觉 感受 形成 一 种 沟通 ， 
产生 心灵 的 共鸣 。 这 是 设计 能 否 成 功 的 关键 。 


| 3 常用 的 网 页 设计 软件 
如 果 你 对 网 页 设计 已 经 有 了 一 定 的 基础 ， 对 HTML 语 言 又 有 一 定 的 了 


rr 泽 下 面 的 几 种 软件 来 设计 你 的 网 页 ， 它 们 一 定 会 为 你 的 网 页 添 色 不 少 。 


1.3.1 网 页 设计 软件 Dreamweaver 

近年 来 ， 随 着 网 络 信 息 技术 的 广泛 应 用 ， 互 联网 正 逐 步 改 变 着 人 们 的 生活 和 工作 方式 。 越 
来 越 多 的 个 人 、 企 业 纷 纷 建立 自己 的 网 站 ， 利 用 网 站 来 宣传 和 推广 自己 。 因 此 也 出 现 了 很 多 的 
网 页 制作 软件 。Adobe 公 司 的 Dreamweaver 无 疑 是 其 中 使 用 最 为 广泛 的 一 个 ， 它 以 强大 的 功能 
和 友好 的 操作 界面 受到 了 广大 网 页 设计 者 的 欢迎 ， 成 为 设计 者 制作 网 页 的 首选 软件 。 特 别 是 最 
新 版 本 的 Dreamweaver CC 软件 ， 新 增 了 许多 功能 ， 可 以 帮助 用 户 在 更 短 的 时 间 内 完成 更 多 的 工 
作 。 图 1-4 所 示 为 网 页 制作 软件 Dreamweaver CC。 
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图 1-4 网 页 制作 软件 Dreamweaver CC 


咀 1.3.2 图 像 设 计 软 件 Photoshop 


Photoshop CC 是 被 业界 公认 的 图 形 图 像 处 理 专家 ， 也 是 全 球 性 的 专业 图 像 编辑 行业 标准 。 
Photoshop CC 是 Adobe 公 司 最 新 版 的 图 像 编 辑 软件 ， 它 提供 了 高 效 的 图 像 编 辑 和 处 理 功能 、 更 
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人 性 化 的 操作 界面 ， 深 受 美术 设计 人 员 的 青睐 。Photoshop CC 集 图 像 设计 、 合 成 及 高 品质 输出 
等 功能 于 一 身 ， 广 泛 应 用 于 平面 设计 和 网 页 美工 、 数 码 照片 后 期 处 理 、 建 筑 效 果 后 期 处 理 等 
诸多 领域 。 该 软件 在 网 页 前 期 设计 中 ， 无 论 是 色彩 的 应 用 、 版 面 的 设计 、 文 字 特 效 、 按 钮 的 制 
作 ， 以 及 网 页 动画 ， 如 导航 条 和 网 络 广告 ， 均 占有 重要 地 位 。 图 1-5 所 示 为 网 页 图 像 设 计 软件 
Photoshop CC 。 
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图 1-5 网 页 图 像 设 计 软 件 Photoshop CC 


虽 1.3.3 ”动画 设计 软件 Flash 

Flash 是 一 款 非常 流行 的 平面 动画 制作 软件 ， 被 广泛 应 网 站 制作 、 游 戏 制作 、 影 视 广 
告 、 电 子 贺卡 、 电 子 杂 志 、MTV 制 作 等 领域 。 它 的 优点 是 体积 小 ， 可 边 下 载 边 播放 ， 这 样 就 避 
免 了 用 户 长 时 间 的 等 待 。 它 可 以 用 其 生成 动画 ， 还 可 在 网 页 中 加 入 声音 。 这 样 你 就 能 生成 多 媒 
体 的 图 形 和 界面 ， 而 文件 的 体积 却 很 小 。Flash CC Professional 是 目前 Flash 的 新 版 本 ， 1-6 所 
示 为 网 页 动画 制作 软件 Flash CC。 


1-6 ”网 页 动画 制作 软件 Flash CC 
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网 页 文档 主要 是 由 HIML 构 成 。HIML 全 名 是 Hyper Text Markup Language， 即 超 文本 标记 
语言 ， 是 用 来 描述 WWW 上 超 文 本 文件 的 语言 。 用 它 编写 的 文件 扩展 名 是 .html 或 .htm。 

HTML 不 是 一 种 编程 语言 ， 而 是 一 种 页 面 描 述 性 标记 语言 。 它 通过 各 种 标记 描述 不 同 的 内 
容 ， 说 明 段 落 、 标 题 、 图 像 、 字 体 等 在 浏览 器 中 的 显示 效果 。 浏 览 器 打开 HTML 文 件 时 ， 将 依 
据 HTML 标 记 去 显示 内 容 。 

HTML 能 够 将 Internet 上 不 同 服务 器 上 的 文件 连接 起 来 ， 可 以 将 文字 、 声 音 、 图 像 、 动 画 、 
视频 等 媒体 有 机 组 织 起 来 ， 展 现 给 用 户 五 彩 缤纷 的 画面 ， 此 外 它 还 可 以 接受 用 户 信息 ， 与 数据 
库 相 连 ， 实 现 用 户 的 查询 请 求 等 交互 功能 。 

HTML 的 任何 标记 都 由 “<” 和 “>” 围 起 来 ， 如 <HTML><I>。 在 起 始 标 记 的 标记 名 前 加 
上 符号 “/” 便 是 其 终止 标记 ， 如 </>， 夹 在 起 始 标记 和 终止 标记 之 间 的 内 容 受 标记 的 控制 ， 例 
如 <IT> 幸 福永 远 </I>， 夹 在 标记 I 之 间 的 “幸福 永远 ”将 受 标记 I 的 控制 。HIMIL 文 件 的 整体 结构 
也 是 如 此 ， 下 面 就 是 最 基本 的 网 页 结构 ， 如 图 1-7 所 示 。 


body> 
GB tole width-"aeew" border-"o" cetlspacing-"0" cellpadding-"e"> 


<td>ctmg src="tmages/top.jpe” width="1e07" hefght="363" at="w/s/rd 
/er> 


tdyecabte width="100%" borcer="e" cellspacing="e" cettpadafngren> 
«td width="23"> cimg src="ineges/left.jpg" width="251" height="se4" alte"™"/></ 


rel wtdrh="77%" valtgn="top"><tanle with="1ees" border="e" collspactng="e" 
cellpedding-"0"> 


atyy Cablay Vir> CU) ual YY C77 AY 97 C77 CD EAE Cr) CO Cy Cy> 
Lael 


图 1-7 基本 的 网 页 结构 
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下 面 讲 述 HTML 的 基本 结构 。 
1. HTML 标 记 
<Html> 标 记 用 于 HIMIL 文 档 的 最 前 边 ， 用 


来 标识 HIML 文档 的 开始 。 而 <Html> 标 记 恰 恰 | 
它 放 在 HTML 文 档 的 最 后 边 ， 用 来 标识 ; 
| 个 标记 必须 一 块 使 用 。 
| 4.。Title 标 记 


相反 ， 
HTML 文 档 的 结束 ， 两 个 标记 必须 一 块 使 用 。 
2. Head 标 记 


-<head> 和 </head> 构 成 HTMI 文 档 的 开头 部 
| 器 窗口 最 上 边 蓝 色 部 分 显示 的 文本 信息 ， 那 
<script></script> 等 标记 对 ， 这 些 标记 对 都 是 | 些 信息 
描述 HTML 文档 相关 信息 的 标记 对 ，<head></ ; 
head> 标 记 对 之 间 的 内 容 不 会 在 浏览 器 的 框 内 | 
; 即 可 。 


分 ， 在 此 标记 对 之 间 可 以 使 用 <title></title>、 


显示 出 来 ， 两 个 标记 必须 一 
器 1.3.5 FTP 软件 
网 站 制作 完毕 ， 需 要 发 布 到 Web 服 务 器 上 ， 


块 使 用 。 


很 多 ， 有 些 网 页 制作 工具 本 身 就 带 有 FTP 功 能 ， 


到 服务 器 上 。 


CuteFtp 是 一 款 非常 受 欢迎 的 FTP 工 具 ， 界 面 简 洁 ， 


i 3。Body 标 记 


<body></body> 是 HTML 文 档 的 主体 部 


| 分， 在 此 标记 对 之 间 可 包含 <p></p>、<hl></ 


hl>、<br></br> 等 众多 的 标记 ， 
文本 、 


它们 所 定义 的 
图 像 等 将 会 在 浏览 器 内 显示 出 来 ， 两 


使 用 过 浏览 器 的 人 可 能 都 会 注意 到 浏览 


一 般 是 网 页 的 “标题 ”， 要 将 网 页 的 
标题 显示 到 浏览 器 的 项 部 其 实 很 简单 ， 只 要 
在 <title></title> 标 记 对 之 间 加 入 要 显示 的 文本 


才能 够 让 别人 浏览 。 现 在 ， 上 传 网 站 的 工具 有 
利用 这 些 FTP 工 具 ， 可 以 很 方便 地 把 网 站 发 布 


其 具有 的 支持 上 下 载 断 点 续 传 、 操 作 简 


单方 便 等 特征 使 其 在 众多 的 FTP 软 件 中 脱颖而出 ， 无 论 是 下 载 软件 还 是 更 新 主页 ，CuteFtp 都 是 
一 款 不 可 多 得 的 好 工具 。 图 1-8 所 示 为 CuteFtp 软 件 。 
PE P| 

1 


WX 


图 1-8 ”CuteFtp 软 件 


1 .4 


能 设计 出 满意 的 网 站 。 因 
好 、 更 合理 的 网 站 。 


网 站 建设 的 一 般 流程 


创建 网 站 是 一 个 系统 工程 ， 有 一 定 的 工作 流程 ， 按 部 就 班 地 来 ， 才 
此 在 制作 网 站 前 ， 先 要 了 解 网 站 建设 的 基本 流程 ， 这 样 才能 制作 出 更 
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人 性 1.4.1 确定 网 站 主题 

在 目标 明确 的 基础 上 ， 完 成 网 站 的 构思 创意 即 总 体 设计 方案 ， 对 网 站 的 整体 风格 和 特色 作 
出 定位 ， 规 划 网 站 的 组 织 结构 。Web 站 点 应 针对 所 服务 对 象 的 不 同 而 具有 不 同 的 形式 。 有 些 站 
点 只 提供 简洁 文本 信息 ; 有 些 则 采用 多 媒体 表现 手法 ， 提 供 华丽 的 图 像 、 闪 烁 的 灯光 、 复 杂 的 
页 面 布 置 ， 甚 至 可 以 下 载 声 音 和 录像 片段 。 好 的 Web 站 点 还 把 图 形 表现 手法 和 有 效 的 组 织 与 通 
信 结 合 起 来 。 要 做 到 主题 鲜明 突出 、 要 点 明确 ， 应 以 简单 明确 的 语言 和 画面 体现 站 点 的 主题 。 
还 要 调动 一 切 手段 充分 表达 站 点 的 个 性 和 情趣 ， 办 出 网 站 的 特点 。Web 站 点 主页 应 具备 的 基本 
成 分 包括 : 页 局 ， 准 确 无 误 地 标识 站 点 和 企业 标志 ;， E-mail 地 址 ， 用 来 接收 用 户 垂询 ， 联 系 信 
息 ， 如 普通 邮件 地 址 或 电话 ， 版权 人 信息， 声明 版 权 所 有 者 等 。 注 意 重复 利用 已 有 信息 。 如 客户 
手册 、 公 共 关 系 文档 、 技 术 手 册 和 数据 库 等 可 以 轻而易举 地 用 到 企业 的 Web 站 点 中 。 


旧 1.4.2 ”网 站 整体 规划 

在 设计 网 站 以 前 ， 需 要 对 网 站 进行 整体 规划 和 设计 ， 写 好 网 站 项 目 设计 书 ， 在 以 后 的 制作 
中 按照 这 些 规 划 和 设计 进行 。 需 要 从 网 站 内 容 、 网 页 美术 效果 和 网 站 程序 的 构思 3 个 方面 进行 
网 站 的 整体 规划 。 
网 站 内 容 : 在 网 站 进行 开发 以 前 ， 需 要 构思 网 站 的 内 容 ， 需 要 突出 哪些 主要 内 容 。 例 如 个 
人 网 站 ， 可 以 有 个 人 文章 、 个 人 活动 、 生 活 照片 、 才 艺 展示 、 个 人 作品 、 联 系 方式 等 内 容 。 还 
需要 明确 哪些 是 主要 内 容 ， 需 要 在 网 站 中 突出 制作 的 重点 。 
网 页 美术 效果 : 页 面 的 美术 效果 往往 决定 一 个 网 站 的 档次 ， 网 站 需要 有 美观 大 方 的 版 面 。 
可 以 根据 个 人 的 喜好 、 页 面 内 容 等 设计 出 自己 喜欢 的 页 面 效 果 。 如 果 是 个 人 网 站 ， 可 以 根据 个 
人 的 特长 和 才艺 等 内 容 制作 出 夸张 的 美术 作品 式 的 网 站 。 
网 站 程序 的 构思 : 还 需要 构思 网 站 的 功能 ， 网 站 的 这 些 功 能 需要 由 什么 样 的 程序 来 实现 。 
如 果 是 很 简单 的 个 人 主页 ， 则 不 需要 经 常 更 新 ， 更 不 必 编 程 做 动态 网 站 。 


用 1.4.3 ”收集 资料 与 素材 
网 站 的 设计 需要 相关 的 资料 和 素材 ， 丰 富 的 内 容 才 可 以 丰富 网 站 的 版 面 。 个 人 网 站 可 以 整 
理 个 人 的 作品 、 照 片 、 展 示 等 资料 。 企 业 网 站 需要 整理 企业 的 文件 、 广 告 、 产 品 、 活 动 等 相关 
资料 。 整 理 好 资料 后 需要 对 资料 进行 第 选 和 编辑 。 
可 以 使 用 以 下 方法 来 收集 网 站 资料 与 素材 。 
女 图 片 : 可 以 使 用 相机 拍摄 相关 图 片 ， 对 已 有 的 照片 可 以 使 用 扫描 仪 输入 到 电脑 。 一 些 常 见 
图 片 可 以 在 网 站 上 搜索 或 下 载 。 
六 文档 : 收集 和 整理 现 有 的 文件 、 广 告 、 电 子 表 格 等 内 容 。 对 纸 制 文件 需要 输入 到 电脑 形成 
电子 文档 。 文 字 类 的 资料 需要 进行 整理 和 分 析 。 
六 ”媒体 内 容 : 收集 和 整理 现 有 的 录音 、 视 频 等 资料 。 
用 1.4.4 ”设计 网 页 页 面 
网 页 设计 是 一 个 复杂 而 细致 的 过 程 ， 一 定 要 按照 先 大 后 小 、 先 简单 后 复杂 的 顺序 制作 。 所 
谓 先 大 后 小 ， 就 是 说 在 制作 网 页 时 ， 先 把 大 的 结构 设计 好 ， 再 逐步 完善 小 的 结构 设计 。 所 谓 先 
简单 后 复杂 ， 就 是 先 设计 出 简单 的 内 容 ， 再 设计 复杂 的 内 容 ， 以 便 出 现 问题 时 好 修改 。 设 计 师 
要 根据 站 点 目标 和 用 户 对 象 去 设计 网 页 的 版 式 以 及 安排 网 页 内 容 。 一 般 来 说 ， 至 少 应 该 对 一 些 
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主要 的 页 面 设计 好 布局 ， 确 定 网 页 的 风格 。 
在 制作 网 页 时 要 灵活 运用 模板 和 库 ， 这 样 可 以 大 大 提高 制作 效率 。 如 果 很 多 网 页 都 使 用 相同 
的 版 面 设计 ， 就 应 为 这 个 版 面 设计 一 个 模板 ， 然 后 就 可 以 以 此 模板 为 基础 创建 网 页 。 以 后 如 果 想 
要 改变 所 有 网 页 的 版 面 设计 ， 只 需 简单 地 改变 模板 即 可 。 图 1-9 所 示 为 使 用 模板 制作 的 网 页 。 
ee ! 也 
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图 1-9 制作 的 网 页 模板 


关 1.4.5 切 图 并 制作 成 页 面 


切 图 


是 网 页 设计 中 非常 重要 的 一 环 ， 它 可 以 很 方便 地 为 我 们 标明 哪些 是 图 


片区 域 ， 哪 些 是 


文本 区 域 。 另 外 ， 合 理 的 切 图 还 有 利于 加 快 网 页 的 下 载 速度 、 设 计 复杂 造型 的 网 页 ， 以 及 对 不 


同 特点 的 


图 片 进行 压缩 等 优点 。 切 割 网 站 首页 效果 如 图 1-10 所 示 。 


En 


图 1-10 切割 网 站 首页 


肛 1.4.6 ”开发 动态 网 站 模块 


页 面 设 计 制 作 完 成 后 ， 如 果 还 需要 动态 功能 的 话 ， 就 需要 开发 动态 功能 模块 ， 网 站 中 常 ) 
的 功能 模块 有 搜索 功能 、 留 言 板 、 新 闻 信 息 发 布 、 在 线 购 物 、 技 术 统计 、 论 坛 及 聊天 室 等 。 图 
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1-11 所 示 为 留言 板 页 面 。 
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特 示 发 最 新 动 老 信 息 


版 权 所 有 @@ 半 夏 网 络 资讯 有 限 公司 


图 1-11 留言 板 页 面 


月 1.4.7 ”发 布 与 上 传 - 

在 完成 了 对 站 点 中 页 面 的 制作 后 ， 就 应 该 将 其 发 布 到 Internet 上 供 大 家 浏览 和 观赏 了 。 但 是 

在 此 之 前 ， 应 该 对 所 创建 的 站 点 进行 测试 ， 对 站 点 中 的 文件 逐一 进行 检查 ， 在 本 地 计算 机 中 调 

试 网 页 以 防止 包含 在 网 页 中 的 错误 ， 以 便 尽早 发 现 问题 并 解决 问题 。 

在 测试 站 点 过 程 中 应 该 注意 以 下 几 个 方面 。 

六” 在 测试 站 点 过 程 中 应 确保 在 目标 浏览 器 中 ， 网 页 如 预期 地 显示 和 工作 ， 没 有 损坏 的 链接 ， 
以 及 下 载 时 间 不 宜 过 长 等 。 

太 了 解 各 种 浏览 器 对 Web 页 面 的 支持 程度 ， 不 同 的 浏览 器 观看 同一 个 Web 页 面 ， 会 有 不 同 的 
效果 。 很 多 制作 的 特殊 效果 ， 在 有 些 浏览 器 中 可 能 看 不 到 ， 为 此 需要 进行 浏览 器 兼容 性 检 
测 ， 以 找 出 不 被 其 他 浏览 器 支持 的 部 分 。 

太 ”检查 链接 的 正确 性 ， 可 以 通过 Dreamweaver 提 供 的 检查 链接 功能 来 检查 文件 或 站 点 中 的 内 
部 链接 及 孤立 文件 。 

网 站 的 域名 和 空间 申请 完毕 后 ， 就 可 以 上 传 网 站 了 ， 可 以 采用 Dreamweaver 自 带 的 站 点 管 

理 上 传 文件 。 


虽 1.4.8 ”后 期 更 新 与 维护 - 

一 个 好 的 网 站 ， 仅 仅 一 次 是 不 可 能 制作 完美 的 ， 由 于 市 场 环境 在 不 断 地 变化 ， 网 站 的 内 容 

也 需要 随 之 调整 ， 给 人 常 新 的 感觉 ， 网 站 才 会 更 加 吸引 访问 者 ， 而 且 给 访问 者 很 好 的 印象 。 这 

就 要 求 对 网 站 进行 长 期 的 不 间断 的 维护 和 更 新 。 

网 站 维护 一 般 包 含 以 下 内 容 。 

太 ”内容 的 更 新 : 包括 产品 信息 的 更 新 、 企 业 新 闻 动 态 更 新 和 其 他 动态 内 容 的 更 新 。 采 用 动态 
数据 库 可 以 随时 更 新 发 布 新 内 容 ， 不 必 做 网 页 和 上 传 服务 器 等 麻烦 工作 。 静 态 页 面 不 便于 
维护 ， 必 须 手动 重复 制作 网 页 文档 ， 制 作 完 成 后 还 需要 上 传 到 远程 服务 器 。 一 般 对 于 数量 
比较 多 的 静态 页 面 建议 采用 模板 制作 。 

太 ”网 站 风格 的 更 新 : 包括 版 面 、 配 色 等 各 种 方面 。 改 版 后 的 网 站 让 客户 感觉 改头换面 ， 焕 然 
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一 新 。 一 般 改 版 的 周期 要 长 些 。 客 户 对 网 站 也 满意 的 话 ， 改 版 可 以 延长 到 几 个 月 甚至 半 
年 。 一 般 一 个 网 站 建设 完成 以 后 ， 代 表 了 公司 的 形象 、 公 司 的 风格 。 随 着 时 间 的 推移 ， 很 
多 客户 对 这 种 形象 已 经 形成 了 定 势 。 如 果 经 常 改版 ， 会 让 客户 感觉 不 适应 ， 特 别 是 那 种 风 
格 彻底 改变 的 “改版 ”。 当 然 如 果 对 公司 网 站 有 更 好 的 设计 方案 ， 可 以 考虑 改版 。 毕 竟 长 
期 沿用 一 种 版 面 会 让 人 感觉 陈旧 、 厌 烦 。 
六 ”网 站 重要 页 面 设计 制作 ， 如 重大 事件 页 面 、 突 发 事件 及 相关 周年 庆祝 等 活动 页 面 设计 制作 。 
太 ”网 站 系统 维护 服务 ， 如 E-mail 账号 维护 服务 、 域 名 维护 续费 服务 、 网 站 空间 维护 、 与 IDC 
进行 联系 、DNS 设 置 、 域 名 解析 服务 等 。 


全 1.4.9 网 站 的 推广 

互联 网 的 应 用 和 繁荣 提供 了 广阔 的 电子 商务 市 场 和 商机 ， 但 是 互联 网 上 大 大 小 小 的 各 种 网 
站 数 以 百 万 计 ， 如 何 让 更 多 的 人 都 能 迅速 地 访问 到 你 的 网 站 是 一 个 十 分 重要 的 问题 。 企 业 网 站 
建 好 以 后 ， 如 果 不 进行 推广 ， 那 么 企业 的 产品 与 服务 在 网 上 就 仍然 不 为 人 所 知 ， 起 不 到 建立 站 
点 的 作用 ， 所 以 企业 在 建立 网 站 后 即 应 着 手 利 用 各 种 手段 推广 自己 的 网 站 。 网 站 的 推广 有 很 多 
种 方式 ， 在 后 面 的 章节 中 将 详细 讲述 ， 这 里 就 不 再 叙述 了 。 


| 5 课 后 练习 : 
@ 


一 、 填 空 题 

1. 一 个 域名 是 分 为 多 个 字段 的 ， 如 www.sina.com.cn， 这 个 域名 分 为 4 个 字段 。 是 
一 个 国家 字段 ， 表 示 域 名 是 中 国 的 ; 表示 域名 的 类 型 ， 表 示 这 个 域名 是 公共 服务 类 的 
域名 ; 表示 域名 提供 www 网 站 服务 ; 表示 这 个 域名 的 名 称 。 域 名 中 的 最 后 
一 个 字段 ， 一 般 是 国家 字段 。 

2. 设计 的 实现 可 以 分 为 两 个 部 分 。 第 一 部 分 为 ， 这 一 部 分 可 以 在 纸 上 完 
成 。 第 二 部 分 为 ， 这 一 过 程 是 在 计算 机 上 完成 的 。 
二 、 简 答题 

简 述 商业 网 站 的 建设 流程 。 

提示 2 
I 参考 第 1.4 节 网 站 建设 的 基本 流程 。 


@ 本 章 主要 学 习 了 网 页 的 基本 概念 、 网 页 制作 常用 软件 、 常 见 的 网 站 类 
型 ， 最 后 介绍 了 网 站 建设 的 流程 等 。 通 过 本 章 的 学 习 ， 读 者 应 掌握 网 页 设计 的 一 些 基础 知识 ， 
为 后 面 设计 制作 更 复杂 的 网 页 打下 良好 的 基础 。 


第 2 章 
网 页 的 色彩 搭配 


本 章 导读 
打开 一 个 网 站 ， 给 用 户 留 下 第 一 印象 的 既 


不 是 网 站 丰富 的 内 容 ， 也 不 是 网 站 合理 的 版 面 布 
局 ， 而 是 网 站 的 色彩 。 在 网 页 设计 中 ， 色 彩 搭配 
是 树立 网 站 形象 的 关键 ， 色 彩 处 理 得 好 可 以 使 网 
页 锦上添花 ， 达 到 事半功倍 的 效果 。 色 彩 搭配 一 
定 要 合理 ， 给 人 一 种 和 谐 、 愉 快 的 感觉 ， 避 免 采 
用 容易 造成 视觉 疲劳 的 纯度 很 高 的 单一 色彩 。 在 
设计 网 页 色彩 时 应 该 了 解 一 些 搭配 技巧 ， 以 便 更 
好 地 使 用 色彩 。 本 章 颜色 效果 参见 彩 插页 。 


技术 要 点 
色彩 基础 知识 
色彩 的 原理 
掌握 色彩 与 心理 
掌握 页 面色 彩 搭配 
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| 


ee 颜 六 色 ， 千变万化 。 


2 彩 的 基本 概念 


为 了 能 更 好 地 应 用 色彩 来 设计 网 页 ， 先 | 
来 了 解 一 下 色彩 的 一 些 基 本 概念 。 自 然 界 中 | 
色彩 五 颜 六 色 、 千 变 万 化 ， 但 是 最 基本 的 有 3 
种 〈 红 、 黄 、 蓝 ) ， 其 他 的 色彩 都 可 以 由 这 ， 
3 种 色彩 调和 而 成 ， 我 们 称 这 3 种 色彩 为 “三 ， 
原色 ”。 平 时 所 看 到 的 和 白 色光， 经 过 分 析 在 
色 带 上 可 以 看 到 ， 它 包括 红 、 梅 、 黄 、 绿 、 | 
青 、 蓝 、 紫 7 色 ， 各 颜色 间 自 然 过渡 ， 其 中 ， | 

原色 ， 三 原色 通过 不 同比 例 ; 


@ 
色彩 五 


红 、 黄 、 蓝 是 三 


的 混合 可 以 得 到 各 种 颜色 。 | 
色 交 互 重 春 ， 就 产生 了 
青 、 洋 红 、 黄 ， 如 图 2-1 所 示 。 | 


把 红 、 绿 、 蓝 3 种 
混合 色 : 


图 2-1 红 、 绿 、 蓝 交互 产生 混合 色 

太 相近 色 : 色 环 中 相 邻 的 3 种 颜色 ， 相 近 | 
色 的 搭配 给 人 的 视觉 效果 很 舒适 ， 很 ; 
然 ， 所 以 相近 色 在 网 站 设计 中 极为 | 
常用 。 如 图 2-2 中 的 深蓝 色 、 浅 蓝 色 和 | 
紫色 。 
互补 色 : 色 环 中 相对 的 两 种 色彩 ， 如 图 ; 
2-3 中 的 亮 绿 色 跟 紫色 ， 红 色 跟 绿色 , 蓝 | 
色 和 橙色 等 。 对 互补 色 ， 调 整 一 下 补 色 | 
的 亮度 ， 有 时 候 是 一 种 很 好 的 搭配 。 


国 2.1.2 网 页 安全 色 


图 


生生 


网 页 安全 色 是 指 在 不 同 硬件 环境 、 不 同 操作 系统 、 不 
E 何 终端 浏览 


合 〈 调 色 板 ) ， 也 就 是 说 这 些 颜 色 在 人 有 


色彩 基础 知识 


自然 界 中 有 许多 种 色彩 


全 
一 


| 草地 、 海 洋 都 有 它们 各 自 的 色 


， 如 香蕉 是 黄色 的 ， 天 是 蓝 色 的 ， 桔 子 是 禁 


本 _ ae 
2 “a 30 度 


图 2-2 相近 色 

暖色 : 图 2-4 中 的 黄色 、 色 
色 等 都 属于 暖色 系列 。 暖色 跟 黑 色调 和 
可 以 达到 很 好 的 效果 。 暖 色 一 般 应 用 了 
购物 类 网 站 、 儿 童 类 网 站 等 ， 用 以 体现 
商品 的 琳琅 满目 ， 儿 童 类 网 站 的 活泼、 
温馨 等 效果 。 

冷色 : 图 2-5 中 的 绿色 、 蓝 色 、 蓝 紫色 等 
都 属于 冷色 系列 。 冷 色 跟 白色 调和 可 以 
达到 一 种 很 好 的 效果 。 冷 色 一 般 应 用 于 
一 些 高 科技 网 站 ， 主 要 表达 严肃 、 稳 重 
等 效果 。 


es 


180 度 
图 2-3 互补 色 
橙色 、 红 色 、 紫 


A 
a( 
CA Sy CA Ny 
/i TT 
图 2-4 暖色 图 2-5 冷色 

我 们 生活 在 五 彩 缤 纷 的 世界 里 ， 
你 、 

己 的 色彩 ， 代 表 个 人 特色 的 衣着 
、 装 饰物 的 色彩 ， 可 以 充分 反映 人 的 性 
好 、 品 位 。 色 彩 一 般 分 为 无 彩色 和 有 


be 


我 、 


色彩 。 


”彩色 两 大 类 。 


同 浏览 器 中 都 能 够 正常 显示 的 颜色 集 
显示 设备 上 的 现实 效果 都 中 相同 的 。 所 


@_。。 第 2 章 国有 于 2 二 
以 ， 使 用 216 网 页 安全 色 进 行 网 页 配色 可 以 避免 原 有 的 颜色 失真 的 问题 。 图 2-6 所 示 为 网 页 安全 


只 要 在 网 页 中 使 用 216 网 页 安全 颜色 ， 就 可 以 控制 网 页 的 色彩 显示 效果 。 使 用 网 页 安全 颜 
色 的 同时 ， 也 不 # 网 页 安全 颜色 的 使 用 。 


本 


| a 
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@ 现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩色 。 其 中 黑白 灰 属于 非 彩色 系 
列 。 其 他 的 色彩 都 属于 彩色 。 了 明度、 色相、 纯度 是 色彩 最 基本 的 三 要 素 ， 也 是 人 正常 视觉 感知 
色彩 的 3 个 时 


性 


因 系 。 


上 2.2.1 色彩 的 三 要 素 


明度 、 色 相 、 纯 度 是 色彩 最 基本 的 三 要 素 ， 也 是 人 正常 视觉 感知 色彩 的 3 个 写 


Ht 


系 。 
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1. 色相 

色相 指 的 是 
基本 的 特征 ， 是 一 
的 最 主要 的 因素 。 如 紫色 、 绿 
代表 了 不 同 的 色相 。 同 
一 下 亮度 ， 或 者 纯度 很 容易 搭配 ， 如 深 绿 、 
暗 绿 、 草 绿 。 

最 初 的 基本 色相 为 : 红 、 森 、 黄 、 绿 、 
蓝 、 紫 。 在 各 色 中 间 加 插 一 两 个 中 间 色 ， 


色彩 的 名 称 。 


紫 一 一 十 二 基本 色相 ， 如 图 2-7 所 示 。 


图 2-7 十 二 基本 色相 
2. 明度 


童 类 网 站 ，| 


， 主 要 


可 以 运用 一 些 暗 
个 ， 或 者 忧郁 等 性 格 。 
度 变化 。 


图 2-8 所 示 为 色彩 的 明 


色相 是 色彩 最 | 
色彩 区 别 于 另 一 种 色彩 | 
色 、 黄 色 等 都 | 


相 的 色彩 ， 调 整 ;图 2-8 色彩 的 明度 变化 ”图 2.9 同一 色彩 的 明暗 变化 


| 的 明度 。 在 无 彩色 中 ， 和 白色 明度 最 高 ， 黑 
:明度 最 低 ， 白 色 和 黑 
| 的 灰色 系列 ， 在 有 彩 


按 光谱 顺序 形成 : 红 、 栖 红 、 黄 档 、 黄 、 黄 ; 都 有 着 自己 的 明度 特征 ， 如 黄色 明度 最 高 
绿 、 绿 、 绿 蓝 、 蓝 绿 、 蓝 、 蓝 紫 、 紫 、 红 | 紫色 明度 最 低 ， 


3 纯度 


明度 也 叫 亮度 ， 指 的 是 色彩 的 明暗 程 ; 
度 ， 明 度 越 大 ， 色 彩 越 亮 。 如 一 些 购物 、 儿 | 
的 是 一 些 鲜亮 的 颜色 ， 让 人 感 | 站 
觉 绚丽 多 姿 ， 生 气 勃 勃 。 明 度 越 低 ， 颜 色 越 | 用 2.2.2 ”色彩 的 混合 
用 于 一 些 游戏 类 网 站 ， 充 满 神秘 | 
一 些 个 人 站 长 为 了 体现 自身 的 个 性 ， 也 | 
色调 来 表达 个 人 的 一 些 孤 | 


色彩 的 明度 包括 无 彩色 的 明度 和 有 彩色 
色 


色 之 间 是 一 个 从 亮 到 暗 


色 中 ， 任 何 一 种 纯度 色 


纯度 表示 色彩 的 鲜艳 或 纯净 程度 ， 纯 度 


:是 表明 一 种 颜色 中 是 否 含有 白 或 黑 的 成 分 。 
| 假如 某 色 不 含有 白 或 黑 的 成 分 ， 便 是 纯色 ， 
| 其 纯度 最 高 ; 
| 其 纯度 亦 会 逐渐 下 降 ， 如 


如 果 含 有 越 多 白 或 黑 的 成 分 ， 
2-10 所 示 。 


图 2-10 色彩 的 纯度 变化 


所 谓 色彩 混合 是 指 某 一 色彩 中 混入 另 一 
种 色彩 。 经 验 表明 ， 两 种 不 同 的 色彩 混合 ， 
可 获得 第 三 种 色彩 。 在 颜料 混合 中 ， 加 入 的 


| 色彩 愈 多 ， 颜 色 越 暗 ， 最 终 变 为 黑色 。 反 
| 之， 色光 的 三 原色 能 综合 产生 白 

明度 高 是 指 色 彩 较 明亮 ， 而 明度 低 就 是 ; 
指 色 彩 较 灰暗 。 没 有 明度 关系 的 色彩 ， 就 会 | 


色光 。 
三 原色 一 一 有 红 绿 蓝 3 种 颜色 ,就 是 指 这 
3 种 色 中 的 任何 一 色 都 不 能 由 另外 两 种 原色 混 


显得 苍白 无 力 ， 只 有 加 入 明暗 的 变化 ， 才 可 
以 展示 色彩 的 视觉 冲击 力 和 丰富 的 层次 感 ， 
如 图 2-9 所 示 。 


色彩 与 心理 


千 万 年 来 的 生活 实践 ， 
自然 色彩 中 形成 了 一 系列 共同 的 印象 ， 使 人 们 对 色彩 赋予 了 特别 的 象征 


| 合 产生 ， 而 其 他 色 可 由 这 三 色 按 一 定 的 比例 
| 混合 出 来 ， 色 彩 学 上 称 这 3 个 独立 的 色 为 三 原 
| 色 或 三 基色 。 


人 类 由 鲜血 的 红色 、 植 物 的 绿色 、 稳 麦 的 黄 


@ 一 ee 一 第 2 章 号 于 


六 2.3.1 红色 心理 与 网 页 表现 

红色 的 色 感 温暖 ， 性 格 
刚烈 而 外 向 ， 是 一 种 对 人 刺 
激 性 很 强 的 颜色 。 红 色 容 易 
引起 人 的 注意 ， 也 容易 使 人 
兴奋 、 激 动 、 紧 张 、 冲 动 ， 
还 是 一 种 容易 造成 人 视觉 疲 
劳 的 颜色 。 在 众多 颜色 里 ， 
红色 是 最 鲜明 生动 、 最 热烈 
的 颜色 。 因 此 红色 也 是 代表 
热情 的 情感 之 色 。 鲜 明 的 红 
色 极 容易 吸引 人 们 的 目光 。 
图 2-11 所 示 为 红色 为 主 的 产 
品 展示 网 页 。 

在 网 页 颜色 的 应 用 中 ， 
根据 网 页 主题 内 容 的 需求 ， 
纯粹 使 用 红色 为 主 色 调 的 网 
站 相对 较 少 ， 多 用 于 辅助 
色 、 点 睛 色 ， 达 到 陪衬 、 醒 图 2-11 红色 为 主 的 网 页 
目的 效果 。 这 类 颜色 的 组 合 比较 容易 使 人 提升 兴奋 度 。 红 色 特 性 明显 ， 这 一 醒目 的 特殊 属性 ， 
被 广泛 地 应 用 于 节日 节庆 、 食 品 饭店 、 时 尚 休闲 、 化 妆 品 、 服 装 等 类 型 的 网 站 ， 容 易 营造 出 娇 
如、 诱惑 、 艳 丽 等 气氛 


侦 2.3.2 黄色 心理 与 网 页 表现 

黄色 是 阳光 的 色彩 ， 具 有 活泼 与 轻快 的 特点 ， 给 人 十 分 年 轻 的 感觉 ， 象 征 光 明 、 希 望 、 高 
贵 、 愉 快 。 它 的 亮度 最 高 ， 和 其 他 颜色 配合 很 活泼 ， 有 温暖 感 ， 具 有 快乐 、 希 望 、 智 慧 和 轻快 
的 个 性 ， 有 希望 与 功名 等 象征 意义 。 黄 色 也 代表 着 土地 、 象 征 着 权力 ， 并 且 还 具有 神秘 的 宗教 
色彩 。 图 2-12 为 使 用 黄色 为 主 的 网 页 。 


国 21 12 黄色 为 主 的 网 页 
浅黄 色 有 明朗、 愉快 、 希 望 、 发 展 的 心理 感受 ， 它 有 雅致 、 清 爽 属 性 ， 较 适合 用 于 女性 
及 化 妆 品 类 网 站 。 中 黄色 有 崇高 、 尊 贵 、 辉 煌 、 注 意 、 扩 张 的 心理 感受 。 深 黄色 给 人 高 贵 、 温 
和 、 稳 重 的 心理 感受 


课堂 实录 “se -全 
围 2.3.3 蓝 色 心理 与 网 页 表现 - 一 -DO 
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于 蓝 色 给 人 以 沉稳 的 
感觉 ， 且 具有 智慧 、 准 确 的 意 
象 ， 在 商业 设计 中 常 强调 科 
技 、 效 率 的 商品 或 企业 形象 。 
企业 大 多 选用 蓝 色 当 标 准 色 、 
企业 色 ， 如 电脑 、 汽 车 、 影 印 
机 、 摄 影 器 材 等 。 另 外 ， 蓝 色 
也 代表 忧郁 和 浪漫 ， 这 个 意象 
也 常 运用 在 文学 作品 或 感性 诉 
求 的 商业 设计 中 。 图 2-13 为 以 
蓝 色 为 主 的 网 页 。 


2.3.4 


在 商业 设计 中 ， 绿 色 
所 传达 的 是 清爽 、 理 想 、 希 
望 、 生 长 的 意象 ， 符 合 服务 
业 、 卫 生 保 健 业 、 教 育 行 
业 、 农 业 的 要 求 。 在 工厂 
中 ， 为 了 避免 操作 时 眼睛 疲 
劳 ， 许 多 机 械 也 是 采用 绿 
色 ， 一 般 的 医疗 机 构 场所 ， 
也 常 采 用 绿色 来 做 空间 色彩 
规划 。 图 2-14 是 使 用 绿色 为 
主 的 网 页 。 
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图 2-13 蓝 色 为 主 的 网 页 


绿色 心理 与 网 页 表现 O 


二 二 过 施 


图 2-14 绿色 为 主 的 网 页 


中 2.3.5 ”紫色 心理 与 网 页 表现 
由 于 具有 强烈 的 女性 化 


性 格 ， 在 


商业 设计 用 色 中 ， 


紫色 受到 相当 的 限制 ， 除 了 


和 女性 有 


关 的 商品 或 企业 形 


象 外 ， 其 他 类 的 设计 不 常 采 


用 为 主 色 。 


图 2-15 是 以 紫色 


为 主 的 网 页 。 


上 2.3.6 ”橙色 心理 与 网 页 表现 


@ 一 e 第 2? 章 本 


[十字 顽 全 给 
与 “aaa 


图 2-15 紫色 为 主 的 网 页 


橙色 具有 轻快 、 欢 欣 、 收 获 、 温 韦 、 时 尚 的 效果 ， 是 带 有 快乐 、 喜 悦 、 能 量 的 色彩 。 
整个 色谱 里 ， ee 
度 ， 是 最 耀眼 的 色彩 ， 给 
ep 


的 感觉 ， 


令 人 振奋 的 颜 


色 。 橙 色 具 有 健康 、 富 有 活 


力 、 勇 敢 


自由 等 象征 意义 ， 


能 给 人 有 庄严 、 尊 贵 、 神 秘 


等 感觉 。 


橙色 在 空气 中 的 穿 


透 力 仅 次 于 红色 ， 也 是 容易 
造成 视觉 疲劳 的 颜色 。 


在 网 


页 颜色 里 ， 栖 色 


适用 于 视觉 要 求 较 高 的 时 尚 
网 站 ， 属 于 注目 、 芳 香 的 颜 


色 ， 也 常 被 用 于 味觉 较 高 的 


食品 网 站 ， 是 容易 引起 食欲 


的 颜色 。 
的 网 页 。 


图 2-16 为 使 用 栖 色 


© ct 年 1 月 2 日 星期 六 
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图 2-16 橙色 为 主 的 网 页 
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轩 2.3.7 ”白色 心理 与 网 页 表现 

在 商业 设计 中 白色 具有 洁白 、 明 快 、 纯 真 、 清 洁 的 意象 ， 通 常 需 和 其 他 色彩 搭配 使 用 。 纯 
白色 给 人 以 寒冷 、 严 峻 的 感觉 ， 所 以 在 使 用 纯 白 色 时 ， 都 会 掺 一 些 其 他 的 色彩 ， 如 象牙 白 、 米 
白 、 乳 白 等 。 在 生活 用 品 和 服饰 用 色 上 ， 和 白色 是 永远 流行 的 主要 色 ， 可 以 和 任何 颜色 搭配 。 


用 2.3.8 ”黑色 心理 与 网 页 表现 
黑色 也 有 很 强大 的 感染 力 ， 

它 能 够 表现 出 特有 的 高 责 ， 且 黑色 
还 经 常用 于 表现 死亡 和 神秘 。 在 商 
业 设计 中 ， 黑 色 是 许多 科技 产品 的 
色 ， 如 电视 、 跑 车 、 摄 影 机 、 音 
响 、 仪 器 的 色彩 大 多 采用 黑色 。 在 
其 他 方面 ， 黑 色 庄严 的 意象 也 常用 
在 一 些 特殊 场合 的 空间 设计 。 生 活 
品 和 服饰 设计 大 多 利用 黑色 来 塑 
造 高 贵 的 形象 。 黑 色 也 是 一 种 永远 
流行 的 主要 颜色 ， 适 合 与 多 种 色彩 
搭配 。 图 2-17 为 以 黑色 与 灰色 为 主 


website、 


i 


wm 


的 网 页 。 图 2-17 以 黑色 与 太 色 为 主 的 网 页 
时 2.3.9 灰色 心理 与 网 页 表现 

在 商业 设计 中 ， 灰 色 具 有 [一 您 的 公司 名 称 
柔和 、 高 雅 的 意象 ， 而 且 属 于 中 A Nin de gong si ming cheng 


间 性 格 ， 男 女 皆 能 接受 ， 所 以 灰 
色 也 是 永远 流行 的 主要 颜色 。 许 
多 高 科技 产品 ， 尤 其 是 和 金属 材 
料 有 关 的 ， 几 乎 都 采用 灰色 来 传 
达 高 级 、 技 术 的 形象 。 使 用 灰色 
时 ， 大 多 利用 不 同 层 次 的 变化 组 
合 和 与 其 他 色彩 搭配 ， 才 不 会 过 


TI 起 | 公司 间 千 | 发 展 太 向 | 


下 订购。 这 个 专业 的 于 而 就 电 从 0be 

hed eh 
个 术 入 的 不 四 可 以 动 许 的 在 这 里 旦 示 出 未 

加 时 估 人 入 这 入 各 责 面 和 业 不 再 蝗 ， 低 可 以 人 江天 扫 页面 习 有 和 左右 放 曙 方式 ， 页面 于 色 ,直至 站 
到 关 一 个 上 直 欢 的 联机 


各 村 您 间 欢 这 个 区 面 都 笛 在 款 林 陶 尼 虹 4 加 果 低 信人 击 在 提供 的 王 基 片 都 不 迁 合 作 的 公 
下 本 全 要 了 和 其 们 ， 二 出 和 9 要 并 代 和 表 村。 基本 全 四 反日 


加 条 妈 殷 芷 和 们 9) 耻 税 中 代用 代 日 己 的 og 生态 ， 苇 们 将 尽 生 共有 站 站 TRI 帮 面 吕 入 中 使 肛 它 ， 滞 
下 和 多 全 夭 后 生效 史 oc 发 坟 纶 我 站， 


于 平淡 、 沉 间 、 有 呆板 、 僵 硬 。 图 Re 
2-18 为 以 灰色 为 主 的 网 页 。 现在 订购 ) 
ee 


图 2-18 灰色 为 主 的 网 页 


人 /A T= 


在 网 页 设计 中 ， 色 彩 搭配 是 树立 网 站 形象 的 关键 ， 色 彩 处 理 得 好 可 以 
使 网 页 锦上添花 ， 达 到 事半功倍 的 效果 。 色 彩 搭配 一 定 要 合理 ， 给 人 一 种 和 谐 、 愉 快 的 感觉 ， 
避免 采用 容易 造成 视觉 疲劳 的 纯度 很 高 的 单一 色彩 。 
22 
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肯 2.4.1 网 页 色彩 搭配 原理 o 
在 选择 网 页 色彩 时 除了 考虑 网 站 本 身 的 特点 外 ， 还 要 遵循 一 定 的 艺术 规律 ， 从 而 设计 出 精 

美的 网 页 。 

色彩 的 独特 性 。 要 有 与 众 不 同 的 色彩 ， 使 得 大 家 对 你 的 印象 强烈 ， 如 图 2-19 所 示 。 


享 健康 人 生 


图 2-19 色彩 的 独特 性 
园 色彩 的 鲜明 性 。 网 页 的 色彩 要 鲜艳 ， 容 易 引 人 注目 ， 如 图 2-20 所 示 。 
色彩 的 适合 性 。 就 是 说 色彩 和 你 表达 的 内 容 气 氛 相 适合 。 图 2-21 所 示 用 橙黄 色 体现 食品 餐饮 上 
点 的 丰富 性 。 


图 2-20 色彩 的 鲜明 性 图 2-21 色彩 的 适合 性 


园 色彩 的 联想 性 。 不 同色 彩 会 产生 不 同 的 联想 ， 由 蓝 色 想 到 天 空 ， 由 黑色 想到 黑夜 ， 由 红色 想到 
喜事 等 ， 选 择 色彩 要 和 你 网 页 的 内 涵 相 关联 。 


23 


ET 识 堂 实录 “ee_®@ 


站 2.4.2 ”网 页 设计 中 色彩 搭配 的 技巧 


用 一 种 色彩 
这 里 是 指 先 选 定 一 种 色 

彩 ， 然 后 调整 透明 度 或 者 饱 
和 度 〈 说 得 通俗 些 就 是 将 色 


| 全 


色彩 ， 用 于 网 页 。 这 样 的 页 


Ce 


彩 变 淡 或 则 加 深 )， 产 生 新 的 在 中 里 甜 在 心里 
用 了 AS oi ” 
面 看 起 来 色彩 统一 ， 有 层次 a 


感 。 图 2-22 所 示 为 使 用 同 
种 色彩 搭配 。 


图 


2. 原色 对 比 搭配 

色相 的 差别 虽 是 因 可 见 光 度 的 长 短 差别 所 形成 ， 
差别 和 确定 色相 的 对 比 程度 。 因 此 在 度量 色相 差 时 
色 环 ， 色 相 环 简称 色 环 ， 如 图 2-23 所 示 。 

一 般 来 说 色彩 的 三 原色 〈 红 、 黄 、 蓝 ) 最 能 体现 
有 诱惑 力 ， 能 够 起 到 集中 视线 的 作用 。 对 比 色 可 以 突 
所 示 。 通 过 合理 使 用 对 比 色 ， 能 够 使 网 站 特色 鲜明 、 
色调 ， 对 比 色 作为 点 级 ， 可 以 起 到 画龙点睛 的 作用 。 


图 2-23 色 环 
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2-22 使 用 同一 种 色彩 搭配 


但 不 能 完全 根据 波长 的 差别 来 确定 色相 的 
不 能 只 依靠 测 光 器 和 可 见 光谱 ， 而 应 借助 


色彩 间 的 差异 。 色 彩 的 对 比 强 ， 看 起 来 就 
出 重点 ， 产 生 强烈 的 视觉 效果 ， 如 图 2-24 
重点 突出 。 在 设计 时 一 般 以 一 种 颜色 为 主 


yg 
Ti 


图 2-24 原色 对 比 搭配 


@ 一 e 一 第 2 章 EN 
3. 补 色 对 比 
在 色 环 中 色相 距离 在 一 百 八 十 度 的 对 比 为 补 色 对 比 ， 即 位 于 色 环 直径 两 端的 颜色 为 补 色 。 
一 对 补 色 在 一 起 ， 可 以 使 对 方 的 色彩 更 加 鲜明 ， 如 图 2-25 所 示 的 橙色 与 蓝 色 、 红 色 与 绿色 等 。 
图 2-26 所 示 为 补 色 对 比 。 


图 2-25 互补 色 图 2-26 补 色 对 比 

4， 间 色 对 比 

间 色 又 叫 “ 二 次 色 ”， 它 是 由 三 原色 调配 出 来 的 颜色 ， 如 红 与 黄 调配 出 橙色 ， 黄 与 蓝调 配 
出 绿色 ， 红 与 蓝调 配 出 紫色 。 在 调配 时 ， 由 于 原色 在 比例 上 多 少 上 有 所 不 同 ， 所 以 能 产生 丰富 
的 间 色 变化 ， 色 相对 比 略 显 柔 和 ， 如 图 2-27 所 示 。 

在 网 页 色彩 搭配 中 间 色 对 比 得 很 多 ， 图 2-28 中 的 绿 与 楼 ， 这 样 的 对 比 都 是 活泼 鲜明 具有 天 然 
美的 配色 。 间 色 是 由 三 原色 中 的 两 原色 调配 而 成 的 ， 因 此 在 视觉 刺激 的 强度 相对 三 原色 来 说 缓和 
不 少 ， 属 于 较 易 搭配 之 色 。 但 仍 有 很 强 的 视觉 冲击 力 ， 容 易 带 来 轻松 、 明 快 、 愉 悦 的 气氛 。 


图 2-27 间 色 对 比 图 2-28 绿 与 檬 间 色 对 比 
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5. 色彩 的 面积 对 比 | 当 两 种 颜色 以 相等 的 面积 比例 出 现时 ， 
色彩 的 面积 对 比 是 指 页 面 中 各 种 色彩 在 面 ; 这 两 种 颜色 就 会 产生 强烈 的 冲突 ， 色 彩 对 比 
积 上 多 与 少 、 大 与 小 的 差别 ， 影 响 到 页 面 主 次 ; 自然 强烈 。 


关系 。 在 同一 视觉 范围 内 ， 色 彩 面积 的 不 同 ， | 如 果 将 比例 变换 为 3:1， 一 种 颜色 被 削 
会 产生 不 同 的 对 比 效果 ， 如 图 2-29 所 示 。 | 弱 ， 整 体 的 色彩 对 比 也 减弱 了 。 当 一 种 颜色 在 


; 整个 页 面 中 占据 主要 位 置 时 ， 则 另 一 种 颜色 只 
; 能 成 为 陪衬 。 这 时 ， 色 彩 对 比 效果 最 弱 。 

| 同一 种 色彩 ， 面 积 越 大 ， 明 度 、 纯 度 越 
; 强 ， 面 积 越 小 ， 明 度 、 纯 度 越 低 。 面 积 大 的 
| 时 候 ， 亮 的 色 显得 更 轻 ， 暗 的 色 显得 更 重 。 

| 根据 设计 主题 的 需要 ， 在 页 面 的 面积 上 以 
| 一 方 为 主 色 ， 其 他 的 颜色 为 次 色 ， 使 页 面 的 主 
|】 次 关系 更 突出 ， 在 统一 的 同时 富有 变化 。 

6. 不 要 将 所 有 颜色 都 用 到 ， 尽 量 控制 在 3 种 色彩 
以 内 

| 7. 背景 和 前 文 的 对 比 尽量 要 大 “绝对 不 要 用 花纹 


图 2-29 色彩 的 面积 对 比 | 繁复 的 图 案 作 背 景 》， 以 便 突出 主要 文字 内 容 
?) 5 课 后 练习 
@ 
一 、 填 空 题 


、 是 色彩 最 基本 的 三 要 素 。 
2. 自然 界 中 色彩 五 颜 六 色 、 千 变 万 化 ， 但 是 最 基本 的 有 3 种 、 
) ， 其 他 的 色彩 都 可 以 由 这 3 种 色彩 调和 而 成 ， 称 这 3 种 色彩 为 “三 原色 ”。 


二 、 简 答题 
网 页 各 种 色彩 心理 表现 是 怎样 的 ? 


@ 随 着 信息 时 代 的 快速 到 来 ， 网 络 也 开始 变 得 多 姿 多 彩 。 所 以 网 页 设计 
者 不 仅 要 掌握 基本 的 网 站 制作 技术 ， 还 需要 掌握 网 站 的 风格 、 配 色 等 设计 艺术 。 通 过 本 章 的 学 
习 ， 读 者 可 以 了 解 大 致 的 网 页 的 创意 方法 和 原则 ， 以 及 如 何 搭配 网 页 色彩 。 


第 3 章 


Dreamweaver CC 创 


建站 点 和 基本 网 页 


本 章 导读 
随 着 网 络 的 快速 发 展 ， 互 联网 的 应 用 越 来 越 贴近 
生活 ， 越 来 越 多 的 人 加 入 到 了 制作 网 页 的 工作 中 来 ， 
制作 网 页 的 工具 软件 很 多 ， 目 前 使 用 最 广泛 的 就 是 
Dreamweaver。Dreamweaver CC 是 Dreamweaver 的 最 新 
版 本 ， 用 于 对 站 点 、 页 面 和 应 用 程序 进行 设计 、 编 码 和 
开发 。 它 不 仅 继承 了 前 几 个 版 本 的 出 色 功 能 ， 还 在 界面 
整合 和 易 用 性 方面 更 加 贴近 用 户 。 本 章 学 习 的 内 容 主要 
包括 介绍 一 下 Dreamweaver CC 软件 的 工作 界面 功能 、 
站 点 的 创建 、 文 本 的 输入 超 链 接 概念 和 创建 各 种 链接 。 


技术 要 点 
了 解 Dreamweaver CC 


掌握 在 Dreamweaver 中 
创建 站 点 

掌握 添加 文本 
掌握 超 链接 概念 
创建 各 种 链接 
掌握 搭建 站 点 并 创建 
简单 文本 网 页 实例 


ETEEIDETEE 刘 党 实录 。。 一 全 
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2. | 


属性 面板 和 面板 组 等 ， 如 图 3-1 所 示 。 


菜 单 栏 一 osc te 


dex pn 


了 解 Dreamweaver CC 


Dreamweaver CC 是 集 网 页 制作 和 网 站 管理 于 一 身 的 “所 见 即 所 得 ” 
的 网 页 编辑 软件 ， 它 以 强大 的 功能 和 友好 的 操作 界面 备 受 广大 网 页 设计 者 的 欢迎 ， 已 经 成 为 网 
页 制作 的 首选 软件 。Dreamweaver CC 的 工作 界面 主要 由 以 下 几 部 分 组 成 : 菜单 栏 、 文 档 窗口 、 


国 otel 
| 


| | 生 夯 ， 忆 ， 鸯 : 


二 


ee | 
3 得 | 面板 组 


属性 面板 


wh sane 
Crs 


图 3-1 Dreamweaver CC 的 工作 界面 


朋 3.1.1 插入 栏 


单方 式 显 示 ， 另 一 种 是 以 制 表 符 方式 显示 。 


入 网 页 对 象 ， 有 “常用 ”插入 栏 、 
插入 栏 、“ 表 单 ” 插 入 栏 、 
等 ， 如 图 3-2 所 示 。 

[三 


“结构 ” 


回 


是 
加 


| 


霹 回 加 出 日 人 GO 司 回 剧 
由 


Hyperlink 

电子 邮件 钳 接 

水 平 线 

日 期 

TPRAIE 
-字符 


图 3-2 插入 栏 


| 加 3.1.2 
插入 栏 有 两 种 显示 方式 ， 一 种 是 以 菜 | 
| 成 为 面板 组 。 每 个 面板 组 都 可 以 展开 和 折 
插入 栏 中 放置 的 是 制作 网 页 过 程 中 经 常用 到 ; 
的 对 象 和 工具 ， 通 过 插入 栏 可 以 很 方便 地 插 ; 


浮动 面板 组 


Dreamweaver 中 的 面板 可 以 自由 组 合 而 


又 ,并且 可 以 和 其 他 面板 组 停靠 在 一 起 或 取 
消停 靠 。 面 板 组 还 可 以 停靠 到 集成 的 应 用 程 


| 序 窗口 中 。 这 样 就 能 够 很 容易 地 访问 所 需 的 
“媒体 ”插入 栏 
| 所 示 。 


面板 ， 而 不 会 使 工作 区 变 得 混乱 ， 如 图 3-3 


图 3-3 ”浮动 面板 组 
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月 3.1.3 ”文档 工具 栏 


“文档 ”工具 栏 中 包含 “代码 视图 ”、“ 拆 分 视图 ”、“ 设 计 视 图 ”、“ 实 时 视图 ” 按 
钮 ， 这 些 按钮 可 以 在 文档 的 不 同 视图 间 快 速 切 换 ， 工 具 栏 中 还 包含 一 些 与 查看 文档 、 在 本 地 和 
远程 站 点 间 传 输 文档 有 关 的 常用 命令 和 选项 ， 如 图 3-4 所 示 。 
代码 | 白 分 [说 | | 殉 捉 加 名。 标量 险 
图 3-4 文档 工具 栏 


“代码 视图 ”: 显示 “代码 ”视图 。 只 在 “文档 ”窗口 中 显示 “代码 ”视图 。 

“ 拆 分 视图 ”: 显示 “代码 ”视图 和 “设计 ”视图 。 将 “文档 ”窗口 拆 分 为 “代码 ”视图 和 “设计 ” 
视图 。 当 选择 了 这 种 组 合 视图 时 ，“ 视 图 选项 ”菜单 中 的 “顶部 的 “设计 ”视图 ”选项 变 为 可 用 。 
“设计 视图 ”: 只 在 “文档 ”窗口 中 显示 “设计 ”视图 。 如 果 处 理 的 是 XML、JavaScript、Java、CSS 或 其 


他 基于 代码 的 文件 类 型 ， 则 不 能 在 “设计 ”视图 中 查看 文件 ， 而 且 “ 设 计 ” 和 “ 拆 分 ”按钮 将 会 变 瞳 。 
“实时 视图 ”: 显示 浏览 器 用 于 执行 该 页 面 的 实际 代码 。 

“文档 标题 ”: 允许 为 文档 输入 一 个 标题 ， 它 将 显示 在 浏览 器 的 标题 栏 中 。 如 果 文 档 已 经 有 了 一 个 标 
题 ， 则 该 标题 将 显示 在 该 区 域 中 。 

“文件 管理 ”: 显示 “文件 管理 ”弹出 菜单 。 

“在 浏览 器 中 预览 /调试 ”: 克 许 在 浏览 器 中 预览 或 调试 文档 。 从 弹出 菜单 中 选择 一 个 浏览 器 。 


国 3.1.4 状态 栏 
“文档 ”窗口 底部 的 状态 栏 提供 与 您 正 创建 的 文档 有 关 的 其 他 信息 ， 如 图 3-5 所 示 。 


人 body> tableY Ctr> Ctd> Ctable> Ctr> Ctd> Ctable> Ctr> Ctd> Ctable> Ctr> <td> CulfudContent704> Cspan> 回国 天 753 x 386v 


图 3-5 状态 栏 


且 3.1.5 “属性 ”面板 
“属性 ”面板 主要 用 于 查看 和 更 改 所 选 对 象 的 各 种 属性 ， 每 种 对 象 都 具有 不 同 的 属性 。 
属性 ”面板 包括 两 种 选项 ， 一 种 是 “HTML” 选 项， 将 默认 显示 文本 的 格式 、 样 式 和 对 齐 

方式 等 属性 。 另 一 种 是 “CSS” 


ee | ess | sss | FF)| 
> i > ~ 于 
选项 ， 单 击 “ 属 性 ”面板 中 的 [ES "Ca me] wn 


“CsS” 选 项 ， 可 以 在 “CSS” 选 上 由 = 和 Es 


项 中 设置 各 种 属性 ， 如 图 3-6 所 示 。 图 3-6 “属性 ”面板 


3 pa 在 Dreamweaver 中 创建 站 点 9 
点 是 管理 网 页 文档 的 场所 ，Dreamweaver CC 是 一 个 站 点 创建 和 管 


理工 具 ， 使 ey 还 可 以 创建 完整 的 站 点 。 


什么 是 站 点 ? 
Web 站 点 : 一 组 位 于 服务 器 上 的 页 ， 使 用 Web 浏 览 器 访问 该 站 点 的 访问 者 可 以 对 其 进行 浏览 。 
远程 站 点 : 服务 器 上 组 成 Web 站 点 的 文件 ， 这 是 从 创建 者 的 角度 而 不 是 访问 者 的 角度 来 看 的 。 


本 地 站 点 : 与 远程 站 点 的 文件 对 应 的 本 地 磁盘 上 的 文件 ， 创 建 者 在 本 地 磁盘 上 编辑 文件 ， 然 后 上 传 到 
远程 站 点 。 


EE 讲堂 六 录 。。 一 全 
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轩 3.2.1 课堂 练 一 练 一 一 建立 站 点 
在 开始 制作 网 页 之 前 ， 最 好 先 定义 一 个 站 点 ， 这 是 为 了 更 好 地 利用 站 点 对 文件 进行 管理 ， 
也 可 以 尽 可 能 地 减少 错误 ， 如 路 径 出 错 、 链 接 出 错 。 新 手 做 网 页 条 理性 、 结 构 性 需要 加 强 ， 往 
往 这 一 个 文件 放 这 里 ， 另 一 个 文件 放 那 里 ， 或 者 所 有 文件 都 放 在 同一 文件 夹 内 ， 这 样 显得 很 
乱 。 建 议 用 一 个 文件 夹 存放 网 站 的 所 有 文件 ， 再 在 文件 夹 内 建立 几 个 分 文件 夹 ， 将 文件 分 类 ， 
如 图 片 文件 放 在 images 文 件 夹 内 ，HTML 文 件 放 在 根 目 录 下 。 如 果 站 点 比较 大 ， 文 件 比 较 多 ， 
可 以 先 按 栏 目 分 类 ， 在 栏目 里 再 分 类 。 使 用 向 导 创 建站 点 具体 操作 步骤 如 下 。 
回 执行 “站 点 ”|“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 单 击 “ 新 建站 点 ” 按 
钮 ， 如 图 3-7 所 示 。 


园 弹出 “站 点 设置 对 象 未 命名 站 点 2” 对 话 框 ， 在 对 话 框 中 的 “站 点 名 称 ” 文 本 框 中 输入 名 称 ， 如 
图 3-8 所 示 。 


一 | 姑 是 因由 中 全 用 的 人 和光，Daanwaavel 
Ee 
和 六 在 庆 外 为 prerweave 需 过 掺 本 地 件 去 和 各 宛 ， | 
7 | 
本 地 站 吉 久 件 夫 1 [DY Doamenb 评语 名 下 让 后 
L227 Cw J wl] 
图 3-7 “管理 站 点 ”对 话 框 图 3-8 输入 站 点 的 名 称 


PO 


有。 执行 “窗口 "| “文件 ” 命令， 打开 “文件 ”面板 ， 在 面板 中 单 去 “管理 站 点 ”起 链接 也 可 以 弹出 “ 管 上 

有理 站 点 ”对 话 框 。 

| 

单 击 “ 本 地 站 点 文件 夹 ”文本 框 右边 的 文件 夹 按钮 天 ， 弹 出 “选择 根 文件 来” 对话 框 ， 在 对 话 
框 中 选择 相应 的 位 置 ， 如 图 3-9 所 示 。 

园 单 击 “选择 文件 夹 ”按钮 ， 选 择 文件 位 置 ， 如 图 3-10 所 示 。 


ee 


礼 可 忆 在 村 入 为 Dleamwesyer 妆 点 壬 提 太 地 件 圭 条 冤 。 ‖ 
站 二名 特 : 到 了 委 生 
和 


E27] EE 了 


图 3 “选择 根 文件 夹 ”对 话 框 | 图 3-10 选择 文件 的 位 置 
园 单 击 “保存 ”按钮 返回 到 “管理 站 点 ”对 话 框 ， 对 话 框 中 显示 了 新 建 的 站 点 ， 如 图 3-11 所 示 。 
国 单 击 “ 完 成 ”按钮 ， 在 “文件 ”面板 中 可 以 看 到 创建 的 站 点 中 的 文件 ， 如 图 3-12 所 示 。 
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图 3-11 “管理 站 点 ”对 话 框 图 3-12 “文件 ”面板 


在 规划 站 点 结构 时 ， 应 该 遵循 哪些 规则 呢 ? 
规划 站 点 结构 需要 遵循 的 规则 如 下 所 述 。 
(1) 每 个 栏目 一 个 文件 夹 ， 把 站 点 划分 为 多 个 目录 。 
(2) 不 同类 型 的 文件 放 在 不 同 的 文件 夹 中 ， 以 利于 调用 和 管理 。 
(3) 在 本 地 站 点 和 远 说 站 点 使 用 相同 的 目录 结构 ， 使 在 本 地 制作 的 站 点 原封 不 动 地 显示 出 来 。 


国 3.2.2 课堂 练 一 练 一 一 复制 与 修改 站 点 

执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 
出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 选中 
要 复制 的 站 点 ， 单 击 “ 复 制 ”按钮 ， 即 可 
将 该 站 点 复制 。 新 复制 出 的 站 点 名 称 会 出 
现在 “管理 站 点 ”对 话 框 的 站 点 列表 中 ， 
如 图 3-13 所 示 。 单 击 “ 完 成 ”按钮 ， 完 成 
对 站 点 的 复制 。 

创建 站 点 后 ， 可 以 对 站 点 进行 编辑 ， 


口 


具体 操作 步骤 如 下 。 
执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 图 3-13 复制 站 点 


“管理 站 点 ”对 话 框 ， 在 对 话 框 中 单 击 “编辑 ”按钮 ， 如 图 3-14 所 示 。 


园 即 可 弹出 “站 点 设置 对 象 实例 素材 ”对 话 框 ， 在 “高 级 设置 ”选项 卡 中 可 以 编辑 站 点 的 信息 ， 
如 图 3-15 所 示 。 


于 认 王 候 文件 夫 :[ 有 一 入 
二 物 相 对 于 ; 又 挡 站 站 点 祖 目 录 
ma | 


eet 
Dreamweaver 请 信用 甘 WaduRte 


nt 


请 角 |][| 台 


图 3-14 “管理 站 点 ”对 话 框 图 3-15 “高 级 设置 ”选项 卡 
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在 Dreamweaver 中 可 以 通过 直接 输入 、 复 制 和 粘贴 的 方法 将 文本 插入 
到 文档 中 ， 可 以 在 文本 的 字符 与 行 之 间 插 入 额外 的 空格 ， 还 可 以 插入 特殊 字符 和 水 平 


用 3.3.1 课堂 练 一 练 一 一 添加 普通 文本 一 一 一 一 一 一 一 一 
文本 是 基本 的 信息 载体 ， 是 网 页 中 的 基 | EE 
本 元 素 。 浏 览 网 页 时 ， 获 取信 息 最 直接 、 最 
直观 的 方式 就 是 通过 文本 。 在 Dreamweaver 中 
添加 文本 的 方法 非常 简单 ， 图 3-16 所 示 是 添加 
文本 后 的 效果 ， 具 体操 作 步 骤 如 下 。 
原始 文件 : 原始 文件 /CH03/3.3.1/index.html 
最 终 文件 : 最 终 文 件 /CH03/3.3.1/index1.html 


图 3-17 打开 网 页 文档 
回 将 光标 置 于 要 输入 文本 的 位 置 ， 输入 文本 ， 
如 图 3-18 所 示 。 


保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 
如 图 3-16 所 示 。 


插入 普通 文本 还 有 一 种 方法 ， 从 其 他 应 用 程 上 
序 中 复制 ， 然 后 粘贴 到 Dreamweaver 文 档 窗口 中 。 
在 添加 文本 时 还 要 注意 根据 用 户 语言 的 不 同 ， 选 上 
拉 不 同 的 文本 纺 码 方式， 错 训 的 文本 纺 码 方式 将 | 


园 打开 网 页 文档 ， 如 图 3-17 所 示 。 | BS 


轩 3.3.2 ”课堂 练 一 练 一 一 添加 特殊 字符 
制作 网 页 时 ， 有 时 要 输入 一 些 键盘 上 没有 的 特殊 字符 ， 如 日 元 符号 、 注 册 商 标 等 ， 这 就 需 


图 3-16 添加 文本 
A Rd 
网 页 文本 的 是 加 页 制作 基本 的 操作 ， 
灵活 应 用 各 种 文本 属性 可 以 排版 出 更 加 美观 、 条 


理 清晰 的 网 页 。 文 本 属性 较 多 ， 各 种 设置 比较 详 
是 知 ， 在 学 习 时 不 要 着 急 ， 一 点 点 实验 体会 。 
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要 使 用 Dreamweaver 的 特殊 字符 功能 。 下 面 通 } 执行 “插入 ”|“ 字 符 ”|“ 版 权 ” 命 令 ， 


如 


过 版 权 符 号 的 插入 讲述 特殊 字符 的 添加 , 效 ; 图 3-21 所 示 。 
果 如 图 3-19 所 示 。 具体 操作 步骤 如 下 。 | 


: 图 3-21 执行 “版权” 命令 
| 固 选择 命令 后 就 可 插入 特殊 字符 ， 如 图 3-22 
| 所 示 。 


De Tn Wh BBW eM WW WO) S000 WH BIW WRI 


sim am ne WER ea er | 

sem TE Rs WN Menemaaer, mamas gnaw | CE mt mwaanaaanage 
rnd snes | rea Wt ee EO 
(A prawn Th paar | i 
ra Hvar eurnne, za mungaT hfeang ne ! 


Es 

图 3-19 特殊 字符 的 添加 效果 | | 
原始 文件 : 原始 文件 /CH03/3.3.2/index.html 
最 终 文件 : 最终 文件 /CH03/3.3.2/index1.html 


团 打开 网 页 文档 ， 将 光标 置 于 要 插入 特殊 字符 ; = as 
的 位 置 ， 如 图 3-20 所 示 。 图 3-22 ”插入 特殊 字符 


ml > 
mr 


插入 特殊 字符 的 方法 还 有 以 下 两 种 。 


> 


I 

上 六 单 击 “ 常 用 ”插入 栏 中 的 蚂 -按钮 右 侧 的 小 三 上 
i 上 角形 图 标 ， 在 弹出 的 菜单 中 选择 要 插入 的 特有 
| 中 珠 符 号 。 I 
| 上 执行 “插入 ”| “其 他 字符 ”命令 ， 弹 出 “ 桥 上 

I 入 其 他 字符 ”对 话 框 ， 在 对 话 框 中 选择 相应 上 


ee een aren : 的 特殊 符号 ， 单 击 “ 确 定 ” 按 钮 ， 以 所 | 


| 
和 和 = = He | 


; 回 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 


图 3-20 ”打开 网 页 文档 : 如 图 3-19 所 示 。 


上 3.3.3 ”课堂 练 一 练 一 一 在 字符 之 间 添 加 空格 O 
在 做 网 页 的 时 候 ， 有 时 需要 输入 空格 ， 但 有 时 却 无 法 输入 。 导 致 无 法 正确 输入 空格 的 原因 
ee 只 有 正确 使 用 输入 法 才能 够 解决 这 个 问题 。 在 字符 之 间 添 加 空格 的 方法 
常 简单 ， 效 果 如 图 3-23 所 示 。 具 体操 作 步 骤 如 下 。 
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切换 到 拆 分 视图 ， 输 入 “&nbsp;” 代 码 ， 如 
图 3-25 所 示 。 


EE FE HBH 
,a 


ls, ws, ae Wt 


Bi Bes esheets 


se ET Rh ASFANEAI FI OE, te 
和 


pdt trl 图 3-25 输入 代码 


ee 加 在 拆 分 视图 中 输 几 次 代码 ， 在 设计 视图 中 就 


图 3-23 ”在 字符 之 间 添加 空格 效果 
和信 dy y 有 
原始 文件 : 原始 文件 /CH03/3.3.3/index html 会 出 现 几 个 空格 。 保 存 文档 ， 按 F12 键 在 浏 
览 器 中 预览 ， 效 果 如 图 3-23 所 示 。 


最 终 文件 ， 最终 文 件 /CH03/3.3.3/index1.html 


国 打开 网 页 文档 ， 将 光标 置 于 要 添加 空格 的 位 
置 ， 如 图 3-24 所 示 。 


DW SM WD WW MA WM Wo So WAH BOW Maot - WB Olels 


提示 mm mm mm mm mm no 


在 字符 之 间 要 插入 连续 空格 ， 可 执行 “ 桥 肯 
入 ”| “字符 ”| “不 换行 空格 ”菜单 命令 ， 或 者 按 上 
Ctrl+Shiftt 空 格 组 合 键 。 实 际 是 在 代码 中 添加 了 上 
“&nbsp;” 这 个 字符 。 1 


F | BN RE 
Cr 
Me TRY， 


还 可 以 使 用 以 下 两 种 方法 插入 空格 。 

交 ”如果 使 用 智能 ABC 输入 法 ， 按 Shift+ 空 格 组 合 
键 ， 这 时 输入 法 的 属性 栏 上 的 半月 形 就 变 成 
了 贺 形 ， 再 按 空格 键 ， 空 格 就 出 来 了 。 

友 切换 到 “常用 ”插入 栏 ， 在 “字符 ”下 拉 列 
表 中 选择 “不 换行 空格 ”选项 ， 就 可 直接 输 

入 空格 。 


图 3-24 打开 网 页 文档 


用 3.3.4 课堂 练 一 练 一 
很 多 网 页 在 其 下 方 会 显示 一 条 水 平 线 ， 
以 分 割 网 页 主题 内 容 和 底 端 的 版 权 声明 等 
根据 设计 需要 ， 也 可 以 在 网 页 任意 位 置 添加 
水 平 线 ， 达 到 区 分 网 页 中 不 同 内 容 的 目的 。 
下 面 通过 实例 讲述 在 网 页 中 插入 水 平 线 ， 效 
果 如 图 3-26 所 示 。 具 体操 作 步 骤 如 下 。 
原始 文件 : 原始 文件 /CH03/3.3.4/index.html 
最 终 文 件 : 最 终 文件 /CH03/3.3.4/indexl.html 
国 打开 网 页 文档 ， 将 光标 置 于 要 插入 水 平 线 的 
位 置 ， 如 图 3-27 所 示 。 
执行 “插入 ”|“ 水 平 线 ” 命 令 ， 插 入 水 平 
线 ， 如 图 3-28 所 示 。 图 3-26 ”插入 水 平 线 效果 


由 [h 


@ 。。 第 3 章 ENET 


DW Fun me wm SMD Me ea) med Ke EW 二 - 国 


F 
eq 
Sn re eR Pn HN 
人 
eile 
eames 


4 ER RR ER. EL 
NOR AR RA 


图 3-27 打开 网 页 文档 图 3-28 插入 水 平 线 
保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-26 所 示 。 


‖ 如 何 更 改 水 平 线 的 颜色 ? | 
1 如 果 需 要 设置 水 平 线 的 颜色 ， 只 要 在 代码 中 添加 颜色 属性 即 可 ， 如 <hr color="#FF0000">。 1 


ee = 


用 3.3.5 ”课堂 练 一 练 一 一 创建 列表 


列表 有 项 目 列表 和 编号 列表 两 种 ， 列 表 
常 应 用 在 条 款 或 列举 等 类 型 的 文件 中 ， 用 列 : 
表 的 方式 进行 罗列 可 使 内 容 更 直观 。 

项 目 列表 又 称 无 序列 表 ， 这 种 列表 的 项 目 
之 间 没 有 先后 顺序 。 项 目 列表 前 面 一 般 用 项 目 
符号 作为 前 导 字 符 ， 图 3-29 所 示 是 创建 项 目 列 
表 效 果 。 具 体操 作 步 又 如 下 。 


的 位 置 ， 如 图 3-30 所 示 。 


Dw zn man mow (RA, eno 0 S10 WA BW we 
stmt 2 E 
ni [3 


图 3-30 ”打开 网 页 文档 


| 园 执行 “结构 ”| “项 目 列表 ”命令 ， 即 可 创 
建 项 目 列表 ， 如 图 3-31 所 示 。 


Fa 


[TE 


图 3-29 创建 项 目 列表 效果 
原始 文件 : 原始 文件 /CH03/3.3.5/index.html 
最 终 文件 : 最 终 文件 /CH03/3.3.5/index1.html 
打开 网 页 文档 ， 将 光标 置 于 要 创建 项 目 列表 | 图 3-31 创建 项 目 列表 
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园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 | 


如 


图 


3-29 所 示 。 


单 击 “ 属 性 ”面板 中 的 “编号 列表 ” 按 甸 |， 
也 可 以 创建 编号 列表 。 


编号 列表 又 称 有 序列 表 ， 其 文本 前 面 ;| 
通常 有 数字 前 导 字符 ， 其 中 的 数字 可 以 是 英 ， 
文字 母 、 阿 拉 伯 数字 或 罗马 数字 等 符号 。 将 ; 
光标 置 于 要 创建 编号 列表 的 位 置 ， 执 行 “ 结 ; 
构 ”| “列表 ”| “编号 列表 ”命令 ， 即 可 创建 ; 


编号 列表 ， 如 图 3-32 所 示 。 


! [Dw zen mr si Sq sem eo eer0 ad CW me 


| 图 3-32 创建 编号 列表 


超 链接 概念 


链接 是 从 一 个 网 页 或 文件 到 另 一 个 网 页 或 文件 的 访问 路 径 ， 不 但 可 以 


指向 图 像 或 多 媒体 文件 ， 还 可 以 指向 电子 邮件 地 址 或 程序 等 。 当 网 站 访问 者 单 击 链 接 时 ， 将 根 
据 目 标的 类 型 执行 相应 的 操作 ， 即 在 Web 浏 览 器 中 打开 或 运行 。 

要 正确 地 创建 链接 ， 就 必须 了 解 链接 与 被 链接 文档 之 间 的 路 径 ， 每 一 个 网 页 都 有 一 个 唯一 
的 地 址 ， 称 为 统一 资源 定位 符 〈URL) 。 网 页 中 的 超级 链接 按照 链接 路 径 的 不 同 ， 可 以 分 为 相 


对 路 径 和 绝对 路 径 两 种 链接 形式 。 


轩 3.4.1 相对 路 径 
相对 路 径 对 于 大 多 数 的 本 地 链接 来 说 ， 


是 最 适用 的 路 径 。 在 当前 文档 与 所 链接 的 文 | 
档 处 于 同一 文件 夹 内 ， 文 档 相 对 路 径 特别 有 | 
。 文 档 相 对 路 径 还 可 用 来 链接 到 其 他 的 
文件 夹 中 的 文档 ， 方 法 是 利用 文件 夹层 次 结 | 
构 ， 指 定 从 当前 文档 到 所 链接 的 文档 的 路 ， 
径 ， 文 档 相对 路 径 省 略 掉 对 于 当前 文档 和 所 ; 
的 绝对 URL 部 分 ， 而 只 提 ; 


-mn 


链接 的 文档 都 相同 
供 不 同 的 路 径 部 分 。 


使 用 相对 路 径 的 好 处 在 于 ， 可 以 将 整个 | 
网 站 移植 到 另 一 个 地 址 的 网 站 中 ， 而 不 需要 | 


修改 文档 中 的 链接 路 径 。 


3.5 


创建 各 种 链接 


前 面 讲述 了 超级 链接 的 基本 概念 和 创建 超级 链接 的 路 径 ， 我 们 通过 前 


四 3.4.2 ”绝对 路 径 
| ”绝对 路 径 是 包括 服务 器 规范 在 内 的 完全 
路 径 ， 绝 对 路 径 不 管 源 文件 在 什么 位 置 ， 都 
可 以 非常 精确 地 找到 ， 除 非 目 标 文档 的 位 置 
发 生变 化 ， 否 则 链接 不 会 失败 。 

采用 绝对 路 径 的 好 处 是 ， 它 同 链接 的 源 
端点 无 关 ， 只 要 网 站 的 地 址 不 变 ， 则 无 论文 
档 在 站 点 中 如 何 移动 ， 都 可 以 正常 实现 跳 转 
而 不 会 发 生 错误 。 另 外 ， 如 果 希 望 链接 到 其 
| 他 的 站 点 上 的 文件 ， 就 必须 用 绝对 路 径 。 

采用 绝对 路 径 的 缺点 在 于 ， 这 种 方式 
的 链接 不 利于 测试 ， 如 果 在 站 点 中 使 用 绝对 
; 地 址 ， 要 想 测试 链接 是 否 有 效 ， 就 必须 在 
| Internet 服 务 器 端 对 链接 进行 测试 ， 它 的 另 一 
| 个 缺点 是 不 利于 站 点 的 移植 。 


面 的 学 习 已 经 对 超级 链接 有 了 大 概 的 了 解 ， 下 面 将 讲述 各 种 类 型 超 链接 的 创建 。 
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侦 3.5.1 课堂 练 一 练 一 一 创建 图 像 热 点 链接 


创建 过 程 中 ， 首 先 选中 图 像 ， 然 后 在 “属性 ”面板 中 选择 热点 工具 在 图 像 上 绘制 热 区 ， 创 
建 图 像 热 点 链接 后 ， 当 单 击 图 像 “ 网 站 首页 ”时 ， 效 果 如 图 3-33 所 示 ， 会 出 现 一 个 手 。 具 体操 
作 步 骤 如 下 。 


原始 文件 : 原始 文件 /CH03/3.5.1/index.html 
最 终 文件 : 最终 文件 /CH03/3.5.1/index1.html 


‖。。 当 预 览 网 页 时 ， 热 点 链接 不 会 显示 ， 当 饼 标 有 
上 光标 移 至 热点 链接 上 时 会 变 为 手 形 ， 以 提示 浏览 
上 者 访 处 为 起 链接 。 I 


图 3-33 图像 热点 链接 效果 


打开 网 页 文档 ， 选 中 创建 热点 链接 的 图 像 ， 如 图 3-34 所 示 。 
园 执行 “窗口 ”|“ 属 性 ”命令 ， 打 开 “ 属 性 ”面板 ， 在 “属性 ”面板 中 单 击 “和 矩形 热点 工具 ” 按 
钮 可 ， 选 择 “ 乱 形 热点 工具 ”， 如 图 3-35 所 示 。 


图 3-35 “属性 ”面板 


除了 可 以 使 用 “矩形 热点 工具 ”外 ， 还 可 以 使 用 “ 桶 辆 形 热 点 工具 ”和 “多 边 形 热 点 工具 ”来 绘制 
“椭圆 形 热点 区 域 ” 和 “多 边 形 热点 区 域 ”， 绘 制 的 方法 和 “矩形 热点 ”一 样 。 


园 将 光标 置 于 图 像 上 要 创建 热点 的 部 分 ， 绘 制 一 个 矩形 热点 ， 如 图 3-36 所 示 。 
加 同 以 上 步骤 绘制 他 的 热点 点 ， 并 设置 热点 链接 ， 如 图 3-37 所 示 。 
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图 3-36 ”绘制 一 个 算 形 热点 图 3-37 绘制 其 他 的 热点 
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园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 单 击 图 像 “ 网 站 首页 ”后 的 效果 如 图 3-33 所 示 。 


图 像 热 点 链接 和 图 像 链接 有 很 多 相似 之 处 ， 有 些 情 况 下 在 浏览 器 中 甚至 都 分 辨 不 出 它们 。 虽 然 它们 的 


最 终 效果 基本 相同 ， 但 两 者 实现 的 原理 还 是 有 很 大 差异 的 。 读 者 在 为 自己 的 网 页 加 入 链接 之 前 ， 应 根据 具 
体 的 实际 情况 ， 选 择 和 使 用 适合 的 链接 方式 。 


个 3.5.2 课堂 练 一 练 一 一 创建 E-mail 链接 

E-mail 链接 也 叫 电子 邮件 链接 ， 电 子 邮 
件 地 址 作为 超 链接 的 链接 目标 与 其 他 链接 目 
标 不 同 。 当 用 户 在 浏览 器 上 单 击 指向 电子 邮 
件 地 址 的 超 链 接 时 ， 将 会 打开 默认 的 邮件 管 
理 器 的 新 邮件 窗口 ， 其 中 会 提示 用 户 输入 信 
息 ， 并 将 该 信息 传送 给 指定 的 E-mail 地 址 。 
下 面 对 文 字 “ 联 系 我 们 ”创建 电子 邮件 链 
接 ， 当 单 击 文字 “联系 我 们 ”时 ， 效 果 如 图 
3-38 所 示 。 具 体操 作 步 骤 如 下 。 


消 润 绿茶 有 限 公司 


图 3-38 创建 电子 邮件 链接 的 效果 


ye 系统 将 自动 启动 电子 邮件 软件 ， 并 在 收 件 人 地 址 中 自动 填写 上 电子 邮件 链接 所 上 
上 指定 的 邮箱 地 址 。 


站 
原始 文件 : 原始 文件 /CH03/3.5.2/index.html 
最 终 文 件 : 最 终 文 件 /CH03/3.5.2/indexl.html 
国 打开 网 页 文档 ， 将 光标 置 于 要 创建 电子 邮件 链接 的 位 置 ， 如 图 3-39 所 示 。 
固 执行 “插入 ”|“ 电 子 邮 件 链接 ” 命 命令 ， 各 图 3-40 所 未。 


图 3-39 打开 网 页 文档 图 3-40 执行 “电子 邮件 链接 ”命令 
园 弹出 “电子 邮件 链接 ”对 话 框 ， 在 对 话 框 的 “文本 ”文本 框 中 输入 “联系 我 们 ”， 在 “电子 邮 
件 ” 文 本 框 中 输入 “mailto: sdhzgw@163.com”， 如 图 3-41 所 示 。 
园 单 击 “确定 ”按钮 ， 创 建 电子 邮件 链接 ， 如 图 3-42 所 示 。 
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Dreamweaver CC 创建 站 点 和 基本 网 岁 
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图 3-41 


PE 
单 击 “ 常 用 ”插入 栏 中 的 “电子 邮件 链接 ”按钮 回 ， 也 可 以 弹出 “电子 邮件 链接 ”对 话 框 。 


国 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 单 


如 何 避 免 页 面 电子 邮件 地 址 被 搜索 到 ? 


经 常会 收 到 不 请 自 来 的 垃圾 信 ， 如 果 拥 有 一 个 站 点 并 发 布 了 E-Mail 链接 ， 那 么 其 他 人 会 利用 特殊 工具 
搜索 到 这 个 地 址 ， 并 加 入 到 他 们 的 数据 库 中 。 要 想 吉 免 E-Mail 地 址 被 搜索 到 ， 可 以 在 页 面 上 不 按 标准 格式 书 


电子 邮件 链接 ”对 话 框 


# “联系 我 们 ”链接 文字 ， 效 果 如 


图 3-42 ”创建 电子 邮件 链接 


写 E-Mail 链接 ， 如 yourname at mail.com， 它 等 同 于 yourname(@mail.com。 


侦 3.5.3 ”课堂 练 一 练 一 一 创建 脚本 链接 - 


脚本 超 链 接 执行 JavaScript 代 
码 或 调用 JavaScript 函 数 ， 它 非常 
有 用 ， 能 够 在 不 离开 当前 网 页 文 
档 的 情况 下 为 访问 者 提供 有 关 某 
项 的 附加 信息 。 脚 本 超 链接 还 可 
以 用 于 在 访问 者 单 击 特定 项 时 ， 
执行 计算 、 表 单 验证 和 其 他 处 理 
任务 ， 图 3-43 所 示 的 是 创建 脚本 
关闭 网 页 的 效果 ， 具 体操 作 步 又 
如 下 。 

原始 文件 : 原始 文件 /CH03/3.5.3/ 
index.html 

最 终 文件 : 最终 文件 /CH03/3.5.3/ 
indexl.html 
打开 网 页 文档 ， 选 中 选项 “ 关 

闭 窗口 ”， 如 图 3-44 所 示 。 
园 在 “属性 ”面板 中 的 “链接 ” 文 

本 框 中 输入 “javascript:window. 

close0”， 如 图 3-45 所 示 。 


图 3-38 所 示 。 
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图 3-43 关闭 网 页 的 效果 
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图 3-44 打开 网 页 文档 
园 保存 文档 ， 按 F12 键 在 浏览 器 中 浏览 ， 单 击 


图 3-45 输入 链接 


“关闭 窗口 ” 超 文本 链接 ， 会 自动 弹出 一 个 提示 对 话 


框 ， 提 示 是 否 关闭 窗口 ， 单 击 “ 是 ”按钮 ， 即 可 关闭 窗口 ， 如 图 3-43 所 示 。 


3.5.4 课堂 练 一 练 一 一 创建 下 载 文件 链接 


如 果 要 在 网 站 中 提供 下 载 资料 ， 就 需 
要 为 文件 提供 下 载 链接 ， 如 果 超 级 链接 指向 


的 不 是 一 个 网 页 文件 ， 而 是 其 他 文件 ， 例 如 : 


zip、mp3、exe 文 件 等 ， 单 击 链接 的 时 候 就 会 } 


下 载 文件 。 创 建 下 载 文件 的 链接 效果 如 图 3-46 
所 示 。 具 体操 作 步 骤 如 下 。 


图 3-46 下载 文件 的 链接 效果 
原始 文件 : 原始 文件 /CH03/3.5.4/index.html 
最 终 文件 : 最 终 文件 /CH03/3.5.4/indexl html 


| 下。 网 站 中 每 个 下 载 文件 必须 对 应 一 个 下 载 链接 ， 目 
| 上 【而 不 能 为 多 个 文件 或 一 个 文件 央 建 立 下 载 链接 ， 如 上 
;上 果 需 要 对 多 个 文件 或 文件 天 提供 下 载 ， 只 能 利用 压 上 
| 上 二 软件 将 这 些 文件 吉文 件 夫 压 纺 为 一 个 文件 。 EL 
| 国 打开 网 页 文档 ， 选 中 要 创建 链接 的 文字 ， 

: 执行 “窗口 ”|“ 属 性 ”命令 ， 如 图 3-47 


| 加 3.47 打开 网 页 文档 
| 回 打开 “属性 ”面板 ， 在 面板 中 单 击 “ 链 接 ” 
| 文本 框 右边 的 按钮 区， 弹出 “选择 文件 ” 
对 话 框 ， 在 对 话 框 中 选择 要 下 载 的 文件 ， 
如 图 3-48 所 示 。 
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园 单 击 “ 确 定 ” 按 钮 ， 添 加 到 “链接 ”文本 框 中 ， 如 图 3-49 所 示 。 


文才 各 Ni 新 建文 < 文 售 zip [Rs 
| me : 
图 3-48 “选择 文件 ”对 话 框 图 3-49 添加 到 “链接 ”文本 框 中 
园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 单 击 文字 “文件 下 载 ”， 效 果 如 图 3-46 所 示 。 


3 6 实战 应 用 一 一 搭建 站 点 并 创建 简单 文本 网 页 - 


下 面 通过 本 章 所 学 的 知识 讲述 如 何 搭建 站 点 及 创建 基本 文本 网 页 ， 效 
果 如 图 3-50 所 示 。 具 体操 作 步 骤 如 下 。 


公司 专业 生产 各 隐 二 于 县、 加 力 夺 具 、 王 寺 夺 局、 电 太 局， 我们 #1 这 本 是 : 工 家 新 个 性 区 届 、 训 有 和 沿 . 经过 二 
几 生 的 区 对外 贸易 和 加 二 和 ， 和 条 了 二 厨 的 生 : 介入 生生， 月 备 了 强大 的 卫 尖 能 力 。 衣 久 扯 8 时 间 内 天 当天 抽 


四 天 下 式 生 产 只 可 用 2 天 。 产品 天体 州 ， 美 击 非 
和 大洋 利 、 永 两 焉 中 攻 等 区 宗 和 地 区 、 公司 病 有 克 大 的 了 入 ， 瑰 有 下 办 外 二 本 这 丙 百 示 ， 退 步 完 和 入 水 限 市 场 
ps, 


以为 让， 外 各 冶 、 针 入 忆 众生 只 全 关 严重 种 、 却 姑 寺 4 村 入 ， 带 关 生 志和 沿 ， 三 新 老 客户 省 五 圭 
代 尖 各 洛 交 引 入 洁 站务 ， 以 率 们 j 工 、 坪 括 讼 计 各 工 直 和 择 守 等 言 作 万 式 ， 二 等 孔 利 ,其 放 避 。 


图 3-50 创建 基本 文本 网 页 效果 
原始 文件 : 原始 文件 /CH03/3.6/index.html 
最 终 文件 : 最 终 文 件 /CH03/3.6/indexl.html 
国 执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 单 击 “ 新 建站 点 ” 按 
钮 ， 如 图 3-51 所 示 。 


园 弹出 “站 点 设置 对 象 ” 未 命名 站 点 2” 对 话 框 ， 在 对 话 框 中 的 “站 点 名 称 ” 文 本 框 中 输入 名 称 ， 
如 图 3-52 所 示 。 
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要 制作 一 个 网 站 ， 第 一 步 操作 都 是 一 样 的 ， 就 是 要 创建 一 个 “站 点 ”， 这 样 可 以 使 整个 网 站 的 脉络 结构 清 
晰 地 展现 在 面前 ， 避 免 了 以 后 再 进行 纷 杂 的 管理 。 


中 记 和 的 也 有 文件 和 大 的 红 合 。 
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图 3-51 “管理 站 点 ”对 话 框 图 3-52 输入 站 点 的 名 称 
单 击 “ 本 地 站 点 文件 夹 ”文本 框 右边 的 文件 夹 按钮 天， 弹出 “选择 根 文件 夹 ”对 话 框 ， 在 对 话 
框 中 选择 相应 的 位 置 ， 如 图 3-53 所 示 。 
回 单 击 “ 文 件 夹 ” 按钮， 选择 文件 位 置 ， 如 图 3-54 所 示 。 


rir 


您 可 以 此 外 为 Dreamweave 站 点 造反 本 地 文件 夫 和 名称 。 
ED 
ET I | 


人 an 
乌 wN7 cn 
Soos pl 
oh 
文人 二 36 
Ce Cm | 到 [9 
图 3-53 “选择 根 文件 夹 ”对 话 框 图 3-54 选择 文件 的 位 置 


园 单 击 “ 保 存 ”按钮 返回 到 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 显示 了 新 建 的 站 点 ， 如 图 3-55 所 示 。 
园 单 击 “ 完 成 ”按钮 ， 在 “文件 ”面板 中 可 以 看 到 创建 的 站 点 中 的 文件 ， 如 图 3-56 所 示 。 


CE 
B23: | 
[本 GTISTC 了 全 击 | 门 | 
| 
a 
Es 
图 3-55 “管理 站 点 ”对 话 框 图 3-56 “文件 ”面板 


站 点 定义 不 好 ， 其 结构 将 会 变 得 纷乱 不 堪 ， 给 以 后 的 维护 造成 很 大 的 困难 ， 大 家 千 万 不 要 小 看 了 它 ， 


这 些 工作 在 整个 网 站 建设 中 是 相当 重要 的 。 
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打开 网 页 文档 ， 如 图 3-57 所 示 。 
园 将 光标 置 于 要 输入 文本 的 位 置 ， 输 入 文本 ， 如 图 3- 58 所 示 。 


ET ED 


ET [3 


图 3-57 打开 网 页 文档 图 3-58 输入 文本 
园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 3-50 所 示 。 
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一 、 填 空 题 

1. 在 开始 制作 网 页 之 前 ， 最 好 先 定义 一 个 ， 这 是 为 了 更 好 地 利用 对 
文件 进行 管理 ， 也 可 以 尽 可 能 地 减少 错误 ， 如 路 径 出 错 、 链 接 出 错 。 

2. 要 正确 地 创建 链接 ， 就 必须 了 解 链接 与 被 链接 文档 之 间 的 路 径 ， 每 一 个 网 页 都 有 一 个 唯 
一 的 地 址 ， 称 为 统一 资源 定位 符 〈URL) 。 网 页 中 的 超级 链接 按照 链接 路 径 的 不 同 ， 可 以 分 为 


和 两 种 链接 形式 
二 、 操 作 题 
给 图 3-59 所 示 的 网 页 添加 文本 ， 并 设置 文本 颜色 ， 效 果 如 图 3-60 所 示 。 
上 直接 在 要 输入 文本 的 地 方 输入 文字 即 可 ， 在 属性 面板 中 设置 文本 颜色。 1 


Mn nl 
原始 文件 : 原始 文件 /CH03/ 操 作 题 /index.html 
最 终 文件 : 最 终 文件 /CH03/ 操 作 题 /index1.html 


图 3-59 原始 文件 图 3-60 添加 文本 效果 
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本 章 主要 学 习 了 Dreamweaver CC 的 知识 、 站 点 的 创建 和 管理 。 创 建 
整个 网 站 时 往往 会 有 这 样 或 那样 的 错误 ， 因 此 读者 一 定 要 掌握 好 站 点 的 创建 和 管理 。 同 时 还 学 
习 了 文本 的 输入 和 插入 其 他 对 象 ， 又 深入 讲解 了 超 链接 概念 和 创建 各 种 链接 的 相关 知识 。 只 有 
熟练 掌握 了 这 些 基 本 技能 ， 才 能 更 好 地 结合 后 面 的 章节 ， 创 建 出 更 切合 实际 需求 、 更 具有 吸引 
力 的 网 页 。 


第 4 章 
添加 图 像 和 媒体 


本 章 导 读 
本 章 我 们 将 学 习 使 用 图 像 和 多 媒体 来 制作 出 
华丽 而 且 动感 十 足 的 网 页 。 图 像 有 着 丰富 的 色彩 和 
表现 形式 ， 恰 当地 利用 图 像 可 以 加 深 对 网 站 的 印 
象 。 这 些 图 像 是 文本 的 说 明 及 解释 ， 可 以 使 文本 清 
晰 易 读 ， 更 加 具有 吸引 力 ， 而 随 着 网 络 技术 的 不 断 
发 展 ， 人 们 已 经 不 再 满足 于 静态 网 页 ， 而 目前 的 网 
页 也 不 再 是 单一 的 文本 ， 图 像 、 声 音 、 视 频 和 动画 
等 多 媒体 技术 更 多 地 应 用 到 了 网 页 之 中 。 


掌握 添加 声音 

掌握 插入 动态 媒体 元 素 
掌握 创建 图 文 并 茂 的 好 
看 的 网 页 
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4 | 添加 图 像 o 
@ 在 使 用 图 像 前 ， 一 定 要 有 目的 地 选择 图 像 ， 最 好 运用 图 像 处 理 软件 半 


化 一 下 图 像 ， 否 则 插入 的 图 像 可 能 不 美观 ， 会 显得 非常 死板 。 


咱 4.1.1 课堂 练 一 练 一 一 插入 图 像 o 
图 像 是 网 页 构成 中 最 重要 的 元 素 之 一 ， | 固 执行 “插入 ”| “图像 ”| “图 像 ” 命令 ， 弹 
美观 的 图 像 会 为 网 站 增添 生命 力 ， 同 时 也 加 出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 
深 对 网 站 风格 的 印象 。 下 面 通 过 图 4-1 所 示 的 中 选择 图 像 images/4jpg， 如 图 4-3 所 示 。 

实例 讲述 在 网 页 中 插入 图 像 。 具 体操 作 步 骤 = 
如 下 。 


ea) Ee Em 


图 4-3 “选择 图 像 源 文件 "对 话 框 
单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 4-4 
所 示 。 


[CEI ew Wa So Wa BOW me mw. 国 @LTeT 


ET 


图 4-1 插入 网 页 图 像 效 果 
原始 文件 : 原始 文件 /CH04/4.1.1/index.html 
最 终 文件 ;最终 文件 /CH04/4.1.1/index1.html 
国 打开 网 页 文档 ， 将 光标 置 于 插入 图 像 的 位 
置 ， 如 图 4-2 所 示 。 
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使 用 以 下 方法 也 可 以 插入 图 像 。 

六 执行 “窗口 ”| “资源 ” 命令， 打开“ 资源 ” 
面板 ， 在 面板 中 单 击 国 按 钮 ， 展 开 图 像 文件 
天 ， 选 定 图 像 文件 ， 然 后 用 鼠标 拖 动 到 网 页 
中 合适 的 位 置 。 

太 单 击 “ 常 用 ”插入 栏 中 的 回 | 按钮 ， 弹 出 “ 先 

择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 需 

要 的 图 像 文件 。 


图 4-2 打开 网 页 文档 
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I 如 果 选 中 的 文件 不 在 本 地 网 站 的 根 目 录 下 ， 则 弹出 下 图 所 示 的 选择 框 ， 系 统 和 要 求 用 户 复制 图 像 文件 到 上 
四 本 地 网 站 的 根 目录 ， 单 击 “ 是 ”按钮 ， 此 时 会 弹出 “复制 文件 为 ”对 话 框 ， 让 用 户 选择 文件 的 存放 位 置 ， 目 
【可 选择 根 目录 或 根 目录 下 的 任何 文件 夫 。 这 里 建议 读者 新 建 一 个 名 称 为 images 的 文件 赤 ， 今 后 可 以 把 网 站 中 上 


的 所 有 图 像 都 放 入 到 该 文件 夹 中 。 
FE | 
EEC) 此 相 的 2 许 -@#wm- 


全 可 文人 二 
DA 网 页 币 f= 与 网 站 奸商 主 生 六 地 \ 世 素 村 \ 古 tc 


他 古训 疙 广 祥 伯 呈 六 件 坟 二 呈 7 


中 4.1.2 设置 图 像 属性 O 
下 面 通过 实例 讲述 图 像 属性 的 设置 ， 如 | 所 示 。 


图 4-5 所 示 。 具 体操 作 步 骤 如 下 。 : ee 
| 

原始 文件 :原始 文件 /CH04/4.1.2/index.html 
最 终 文件 : 最终 文 件 /CH04/4.1.2/index1.html 


en SR st mm as Ws Fa 


图 4-6 ”打开 网 页 文档 


| 园 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
: “对 齐 ”|“ 右 对 齐 ” 命 令 ， 如 图 4-7 所 示 。 
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图 4-5 设置 图 像 属性 后 的 效果 


如 何 加 快 页 面 图 片 下 载 速度 ? 
有 种 情况 ， 首 页 图 片 过 少 ， 而 其 他 页 面 图 片 过 
多 ， 为 了 提高 效率 ， 当 访问 者 浏览 首页 时 ， 后 台 进 


行 其 他 页 面 的 图 片 下 载 。 方 法 是 在 首页 加 入 “<img 


上 ! 图 4-7 设置 图 像 对 齐 方式 
src=“1jpg”width=0 height=0>”， 其 中 width、height : 、 
要 设置 为 0，1jpg 为 提前 下 载 的 图 片 名 。 | 国 还 可 以 根据 需要 设置 图 像 的 其 他 属性 。 保 存 
i 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 
打开 网 页 文档 ， 选 中 插入 的 图 像 ， 如 图 4-6 ; 4-5 所 示 。 
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图 像 属性 面板 中 可 以 进行 如 下 设置 。 

友 宽 和 高 ， 以 像素 为 单位 设 定 图 像 的 宽度 和 高 度 。 当 在 网 页 中 插入 图 像 时 ，Dreamweaver 自 动 使 用 图 
像 的 原始 尺寸 。 可 以 使 用 以 下 单位 指定 图 像 大 小 : 点 、 英 寸 、 毫 米 和 厘米 。 在 HIML 源 代码 中 ， 
Dreamweaver 将 这 些 值 转换 为 以 像素 为 单位 。 

Src: 指定 图 像 的 具体 路 径 。 


链接 : 为 图 像 设 置 超级 链接 。 可 以 单 击 呈 按钮 浏览 选择 要 链接 的 文件 ， 或 直接 输入 URI 路 径 。 
目标 : 链接 时 的 目标 窗口 或 框架 。 在 其 下 拉 列 表 中 包括 以 下 4 个 选项 。 

_blank: 将 链接 的 对 象 在 一 个 未 命名 的 新 浏览 器 窗口 中 打开 。 

_parent: 将 链接 的 对 象 在 含有 该 链接 的 框架 的 父 框 架 集 或 父 窗口 中 打开 。 

_self; 将 链接 的 对 象 在 该 链接 所 在 的 同一 框架 或 窗口 中 打开 。_self 是 默认 选项 ， 通 常 不 需要 指定 它 。 


_top: 将 链接 的 对 象 在 整个 浏览 器 窗口 中 打开 ， 因 而 会 替代 所 有 框架 。 
替换 ;图片 的 注释 。 当 浏览 器 不 能 正常 显示 图 像 时 ， 便 在 图 像 的 位 置 用 这 个 注释 代替 图 像 。 
编辑 :启动 “外 部 编辑 器 ”首选 参数 中 指定 的 图 像 编辑 器 ， 并 使 用 该 图 像 编辑 器 打开 选 定 的 图 像 。 
编辑 ， 启 动 外 部 图 像 编辑 器 编辑 选中 的 图 像 。 
编辑 图 像 设置 国 : 弹出 “图 像 预览 ”对 话 框 ， 在 对 话 框 中 可 以 对 图 像 进行 设置 
重新 取样 品 ， 将 “ 宽 ” 和 “高 ”的 值 重新 设置 为 图 像 的 原始 大 小 。 调 整 所 选 图 像 大 小 后 ， 此 按钮 显示 
在 “ 宽 ” 和 “高 ”文本 框 的 右 侧 。 如 果 没有 调整 过 图 像 的 大 小 ， 该 按钮 不 会 显示 出 来。 
裁剪 车 ， 修剪 图 像 的 大 小 ， 从 所 选 图 像 中 删除 不 需要 的 区 域 。 
亮度 和 对 比 度 科 :调整 图 像 的 亮度 和 对 比 度 。 
锐 化 AJ: 调整 图 像 的 清晰 度 。 
太 地 图 ;名称 和 “热点 工具 ”标注 和 创建 客户 端 图 像 地 图 。 
太 原始 : 指定 在 载 入 主 图 像 之 前 应 该 载 入 的 图 像 。 


人 肯 4.1.3 ”课堂 练 一 练 一 一 创建 鼠标 经 过 图 像 

在 浏览 器 中 查看 网 页 时 ， 当 鼠标 指针 经 过 图 像 时 ， 该 图 像 就 会 变 成 另外 一 幅 图 像 ， 当 鼠标 移 
开 时 ， 该 图 像 就 又 变 回 原来 的 图 像 。 这 种 效果 在 Dreamweaver 中 可 以 非常 方便 地 做 出 来 。 鼠 标 未 
经 过 图 像 时 的 效果 如 图 4-8 所 示 ， 鼠 标 经 过 图 像 时 的 效果 如 图 4-9 所 示 。 具 体操 作 步 又 如 下 。 


上 a wm es me sd Team ba a we me En mn Te 


[em ml =) 


House products 


图 4-8 ”和 饼 标 未 经 过 图 像 时 的 效果 图 4-9 ” 饼 标 经 过 图 像 时 的 效果 
原始 文件 : 原始 文件 /CH04/4.1.3/index.html 
最 终 文件 : 最 终 文件 /CHO4/4.1.3/indexl html 
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国 打开 网 页 文档 ， 将 光标 置 于 插入 鼠标 经 过 图 | 国 单 击 “ 原 始 图 像 ”文本 框 右边 的 “浏览 ” 按 


像 的 位 置 ， 如 图 4-10 所 示 。 : 钮 ， 弹 出 “原始 图 像 : ”对 话 框 ， 在 对 话 
EEC EE TI | 框 中 选择 相应 的 图 像 images/4.jpg， 如 图 4-12 
WE 和 所 示 。 

he Ey 
Se 


pen ex ! 二 wee = 二 
2 | | 三 sm 
WE 
图 4-10 ”打开 网 页 文档 i 上 一 
执行 “插入 ”| “图 像 ” | “鼠标 经 过 图 像 ” | 图 4-12 “原始 图 像 : ”对 话 杠 
命令 ， 弹 出 “插入 鼠标 经 过 图 像 ”对 话 ; 园 单 击 “ 鼠 标 经 过 图 像 ” 文本 框 右边 的 “ 浏 
框 ， 如 图 4-11 所 示 。 : 览 ”按钮 ， 弹 出 “鼠标 经 过 图 像 : ”对 话 


框 ， 在 对 话 框 中 选择 相应 的 图 像 images/5. 
jpg， 如 图 4-13 所 示 。 


| © EEC i 好 
| fae- ne 
| 下 本 
| | sre 
搞 T 时 ,前往 的 URL E ! Er | | | 
! sp | Spo | dovjpg joniejp9 
雹 5 
- | | am 目 三 
图 4-11 “插入 鼠标 经 过 图 像 ”对 话 框 | | 二 
| [ene 
| em 
| rrr - 
在 “插入 鼠标 经 过 图 像 ” 对 话 框 中 可 以 进行 | ; een] [Ca 


如 下 设置。 a 
六 图 像 名 称 : 设置 这 个 滚动 图 像 的 名 称 。 : 全 
六 原始 图 像 : 滚动 图 像 的 原始 图 像 ， 在 其 后 的 | 园 单 击 “确定 ”按钮 ， 添 加 到 对 话 框 ， 如 图 
文本 框 中 输入 此 原始 图 像 的 路 径 ， 或 单 击 | | ”4-14 所 示 。 
“浏览 ”按钮 ， 打开“ 原始 图 像 ”对 话 框 ， | | 
在 “原始 图 像 ”对 话 框 中 可 选择 图 像 。 
鼠标 经 过 图 像 。 用 来 设置 鼠标 经 过 图 像 时 ， 
原始 图 像 蔡 换 成 的 图 像 。 


预 载 鼠 标 经 过 图 像 : 选中 该 复 选 框 ， 网 页 打 
开 就 预 下 载 替换 图 像 到 本 地 。 雪 饼 标 经 过 图 


像 时 ， 能 迅速 地 切换 到 替换 图 像 ;如果 取 消 = ee 
该 选项 ， 当 饼 标 经 过 该 图 像 时 才 下 载 替 换 图 | ; 国 4 涂 可 天 秆 弟 寿 

像 ， 蔡 换 可 能 会 出 现 不 连贯 的 现象。 i 固 单 击 “ 确 定 ”按钮 ， 插 入 鼠标 经 过 图 像 ， 如 
蔡 换 文本 :用 来 设置 图 像 的 替换 文本 ， 当 图 | | 图 4-15 所 示 。 
全 | 园 选中 插入 的 图 像 ， 单 击 鼠 标 右键 ， 在 弹出 
按 下 时 ， 前 往 的 URL: 用 来 设置 滚动 图 像 上 | ; ”的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ” 命 
应 用 的 超 链接 。 A 
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图 4-15 ”插入 图 像 图 4-16 设置 图 像 对 齐 方式 
园 保存 文 要 ， 按 F12 键 在 浏览 器 中 预览 ， 鼠 标 未 经 过 图 像 时 的 效果 如 图 4-8 所 示 ， 鼠 标 经 过 图 像 时 
的 效果 图 4-9 所 示 。 


I 在 插入 饼 标 经 过 图 像 时 ， 如 果 不 为 该 图 像 设置 链接 ，Dreamweaver 将 在 HTML 浙 代码 中 插入 有 一 个 空 链 
上 接 术 ， 该 链接 上 将 附加 鼠标 经 过 的 图 像 行为 ， 如 果 将 该 链接 删除 ， 饼 标 经 过 图 像 将 不 起 作用 。 I 


人 II = 


为 网 页 加 入 背景 音乐 ， 使 访问 者 一 进入 网 站 就 能 听 到 优美 的 音乐 ， 可 
以 大 大 增强 网 站 的 娱乐 性 。 为 网 页 添加 背景 音乐 的 方法 很 简单 ， 既 可 以 通过 内 置 行为 添加 ， 也 
可 以 通过 代码 提示 添加 ， 下 面 分 别 进行 讲述 。 


Ws 课堂 练 一 人 


是 一 个 以 音乐 为 主题 的 网 站 ， 可 为 网 | 

Kn 入 景 音乐 ， 使 访问 者 进入 网 站 便 能 听 | 

到 音乐 效果 ， 增 强 网 站 的 娱乐 性 。 为 Web 网 页 | 

添加 背景 音乐 的 方法 很 简单 ， 通 过 网 页 的 属 ; 

性 设置 即 可 快速 完成 ， 效 果 如 图 4-17 所 示 。 具 | 

体操 作 步 骤 如 下 。 : 
原始 文件 : 原始 文件 /CH04/4.2.1/index.html 

最 终 文 件 ， 最终 文件 /CH04/4.2.1/index1.html : 

轩 打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 如 图 | 

4-18 所 示 。 

全 “插入 ”|“ 媒 体 ”|“ 插 件 ” 命 令 ， 弹 | 

出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 选择 ; 

一 个 音乐 文件 ， 如 图 4-19 所 示 。 : 


图 4-17 插入 背景 音乐 效果 


@ 。。 第 / 章 匡 本 要 到达 可 


DW FRR sma wm EMD MM ea0) AR EM a 动 - ch ol 
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图 4-18 打开 网 页 文档 图 4-19 “选择 文件 ”对 话 框 


园 单 击 “ 确 定 ”按钮 ， 插 入 插件 ， 如 图 4-20 所 示 。 
园 选中 插入 的 插件 ， 在 属性 面板 中 设置 插件 的 相关 属性 ， 如 图 4-21 所 示 。 


[ET 十 国 OFTeT 


图 4-20 插入 插件 图 4-21 设置 插件 
国 保存 文档 ， 在 浏览 器 中 预览 ， 可 以 听 到 音乐 的 效果 ， 如 图 4-17 所 示 。 


肯 4.2.2 课堂 练 一 练 一 一 使 用 代码 提示 添加 背景 音乐 一 一 一 一 0 
通过 代码 提示 ， 可 以 在 代码 视图 
中 插入 代码 。 在 输入 某 些 字符 时 ， 将 
显示 一 个 列表 ， 列 出 完成 条 目 所 需要 
的 选项 。 下 面 通过 代码 提示 讲述 背景 
音乐 的 插入 ， 效 果 如 图 4-22 所 示 ， 具 
体操 作 步 骤 如 下 。 
原始 文件 : 原始 文件 /CH04/4.2.2/index. 
html 
最 终 文 件 : 最 终 文件 /CH04/4.2.2/ 
indexl.html 
国 打开 网 页 文档 ， 如 图 4-23 所 示 。 图 4-22 插入 背景 音乐 效果 
园 切换 到 代码 视图 ， 在 代码 视图 中 找到 标签 <body>， 并 在 其 后 面 输入 “<” 以 显示 标签 列表 ， 输 
入 “<” 时 会 自动 弹出 一 个 列表 框 ， 向 下 滚动 该 列表 并 选中 标签 bgsound， 如 图 4-24 所 示 。 


PF GREEN MOVING 
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Bgsound 标 签 共有 5 个 属 
性 ， 其 中 balance 用 于 设置 音乐 
的 左右 均衡 ，delay 用 于 设置 进 


行 播放 过 程 中 的 延 时 ，loop 用 
于 控制 循环 次 数 ，src 用 于 存放 
音乐 文件 的 路 径 ，volume 用 于 
调节 音量 。 


国 双击 插入 该 标签 ， 如 果 该 
标签 支持 属性 ， 则 按 空 
格 键 以 显示 该 标签 允许 的 
属性 列表 ， 从 中 选择 属性 


Be - 


Dw ”xf 和 日 sav AY SuM) Eo) s+9 al9 SOW #wH) 
ndexhem x 
5 RB ， 拆 分 | 云 计 | 更 扫 于。 要 


| 


J 
WQSBSOF GREEN MOVING LIFE 


om 


及 功 全 性 于 


件 的 路 径 。 


如 图 4-26 所 示 。 


可 串 B05 > 367 
Ea 
src， 如 图 4-25 所 示 。 这 个 
沁 畦 北 是 立 图 4-23 ”打开 网 页 文档 
属性 用 来 设置 背景 音乐 文 _ 
Dw xf 有 日 98M MAD PeIM) WO) so0 Zl EOW We Be- th ol-lel x] 
teem x 一 一 一 “| 
[TI 白 分 | 放 计 。 弄 扫 更。 所。 后 | 用. 图 cs es 
按 Enter 键 后 ， 出 现 “ 浏 史 EE 
» 首 填 | 机 如 
览 ” 字 样 ， 单 击 以 弹出 3 | 
“选择 文件 ”对 话 框 , 在。 上 汪汪 
对 话 框 中 选择 音乐 文件 ， 9 SE 
司 zi"0" cellpacdinge"e" 
pe" width="1082" hetght="749" ale=""/>4 /md 
只 
a 
四 
加 
是 
EE LEEEE 
图 4-24 选中 标签 bgsound 
Dw AHn ma SE MAD WeiM Rag) eid eld EAW eH | 
nd em x 订户 -一 
[RB 着 和 7| 放 || 开 扫 而。 3 图 crs 
Adobe Eeen- 
只 有 
二 
Fe 
二 .ey 


html> 


区 
加 | 
吕 
a 
加 
加 


SELL 


图 4-25 选择 属性 src 


@ 一 e 一 第 4 章 匡 本 1 要 到 本 可 


Co -= 
OH» 422 “| | 7422 3 
播放 背景 音乐 文件 容量 不 二 只” 杀 寻 人 去 二 ~ 口 @| 
要 太 大 ， 否 则 很 可 能 整个 网 页 ey 站 人 其 | 
可 完了 ， 声音 加 还 这 有 || D322 2 
载 完 。 在 背景 音乐 格式 方面 mn ss 
mid 格 式 是 最 好 的 选择 ， 它 不 oa 
仅 拥有 不 错 的 音质 ， 最 关键 的 
是 它 的 容量 非常 小 ， 一 般 只 有 
几 十 KB 。 
园 选择 音乐 文件 后 ， 单 击 | 
“确定 ”按钮 。 在 新 插入 - - = 
的 代码 后 按 空格 键 ， 在 属 图 4-26 “选择 文件 ”对 话 框 
性 列表 中 选择 属性 loop， DW Sm wae SE MAD We Wc Sod il CW I 


如 图 4-27 所 示 。 
国 出 现 “-1” 并 选中 。 在 最 后 
的 属性 值 后 ， 为 该 标签 输 
入 “>”， 如 图 4-28 所 示 。 
加 保存 文档 ， 按 F12 键 在 浏 
览 器 中 预览 ， 效 果 如 图 
4-22 所 示 。 


1 浏览 器 可 能 需要 某 种 附 上 
上 加 的 音频 支持 来 播放 声音 ， 因 
『 此 ， 具 有 不 同 插件 的 不 同 浏览 上 


【器 所 播放 声音 的 效果 通常 会 有 上 a 
1 所 不 同 。 1 
[| es ee BB- 团 0L-]s x | 


图 4-28 输入 “>” 
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插入 动态 媒体 元 素 


@ 多 媒体 技术 的 发 展 使 网 页 设计 者 能 轻松 地 在 页 面 中 加 入 声音 、 动 画 、 
影片 等 内 容 ， 给 访问 者 增添 了 几 分 欣喜 。 媒 体 对 象 在 网 页 上 一 直 是 一 道 亮丽 的 风景 线 ， 正 因为 
有 了 多 媒体 ， 网 页 才 丰 富 起 来 。 


轩 4.3.1 课堂 练 一 练 一 一 插入 Flash 动 画 

在 网 页 中 插入 Flash 影 片 可 以 增加 网 页 的 | 二 
动感 ， 使 网 页 更 具 吸 引力 ， 因 此 多 媒体 元 素 
在 网 页 中 应 用 越 来 越 广泛 。 下 面 通 过 图 4-29 
所 示 的 效果 讲述 如 何在 网 页 中 插入 Flash 影 
片 ， 具 体操 作 步骤 如 下 。 


ET" ee | 
Ee 


图 4-31 “选择 SWF” 对 话 框 
在 对 话 框 中 选择 top.swf， 单 击 “ 确 定 ” 按 
钮 ， 插 入 Flash 影 片 ， 如 图 4-32 所 示 。 


[7 EF | 


图 4-29 插入 Flash 影 片 效 果 

原始 文件 : 原始 文件 /CH04/4.3.1/index.html 

最 终 文件 : 最 终 文件 /CHO4/4.3.L/indexl html 
团 打开 网 页 文档 ， 将 光标 置 于 要 插入 Flash 影 

片 的 位 置 ， 如 图 4-30 所 示 。 
园 执行 “插入 ”| “媒体 ”| “Flash SWF” 命 

令 ， 弹 出 “选择 SWF” 对 话 框 ， 在 对 话 框 
中 选择 相应 的 Flash 文 件 ， 如 图 4-31 所 示 。 


ae 
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图 4-32 插入 Flash 影 片 


@ 。*。 第 / 章 医 I 要 琶 王 本 下 
回 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 | 着 4.3.2 ”课堂 练 一 练 一 一 插入 


如 图 4-29 所 示 。 : 视频 文件 
mi | 随 着 宽带 技术 的 发 民 和 推广 ,出 现 了 许多 
1 村 入 Flash 动 画 还 有 两 种 方法 。 1 ， 视频 网 站 。 越 来 越 多 的 人 选择 观看 在 线 视频 ， 

单 击 “媒体 ”插入 栏 中 的 Flash 接 钮 司 ， 弹 L | 同时 也 有 很 多 的 网 站 提供 在 线 视频 服务 。 
上 4“ 选择 文件 ”对 话 框 ， 也 可 以 插入 Flash 影 片 。 上 | 下 面 通过 图 4-33 所 示 的 效果 讲述 在 网 页 


| ee eel 天 所 有 雪 的 ， 中 插入 Flash 视 频 ， 具 体操 作 步 骤 如 下 。 
人 让 中 下 扣 记 取 坟 A | 原始 文件 : 原始 文件 /CH04/4.3.2/index html 


下 影片 : 
本 最 终 文件 : 最 终 文件 /CH04/4.3.2/indexl.html 


Flash 属 性 面板 的 各 项 设置 。 
Flash 文 本 框 : 输入 Flash 动 画 的 名 称 。 

宽 、 高 : 设置 文档 中 Flash 动 画 的 尺寸 ， 可 以 
输入 数值 改变 其 大 小 ， 也 可 以 在 文档 中 拖 动 
缩放 手柄 来 改变 其 大 小 。 

文件 ， 指 定 Flash 文 件 的 路 径 。 

源 文件 ， 指 定 Flash 源 文档 ia 的 路 径 。 

背景 颜色 指定 影片 区 域 的 背景 颜色 。 在 不 
播放 影片 时 (在 加 载 时 和 在 播放 后 ) 也 显示 

此 颜色 。 | 
编辑 加 BEE ]， 启动 Flash 以 更 新 FLA 文 件 | | 
(使 用 Flash 创 作 工具 创建 的 文件 ) 。 如 果 计 | 
算 机 上 没有 安装 Flash， 则 会 禁用 此 选项 。 

类 : 可 用 于 对 影片 应 用 CSS 类 。 

循环 为 选 此 复 选 框 可 以 重复 播放 Flash 动 画 。 
自动 播放 习 选 此 复 选 框 ， 当 在 浏览 器 中 载 
入 网 页 文档 时 ， 自 动 播放 Flash 动 画 。 

垂直 边 距 和 水 平 边 距 ， 指定 动画 边框 与 网 页 | ; 
上 边界 和 左边 界 的 距离 。 : 图 4-33 插入 Flash 视 频 效 果 

入 大 和 是 Pen 动 呈 在 澡 寺 党 中指 区 所 主 ， | | 国 打开 网 页 文档 ， 将 光标 置 于 要 插入 视频 的 位 
包括 “ 低 品 质 ”、“ 自 动 低 品 质 ”、“ 自 动 | | 置 ， 如 图 4.34 所 示 ， 

高 品质 ”和 “高 品质 ”4 个 选项 。 Ce 

比例 : 设置 显示 比例 ， 包 括 “ 全 部 显示 ”、 
“无 边框 ”和 “严格 匹配 ”3 个 选项 。 

对 齐 : 设置 Flash 在 页 面 中 的 对 齐 方式 。 
Wmode: 默认 值 是 不 透明 ， 这 样 在 浏览 器 
中 ，DHTML 元 素 就 可 以 显示 在 SWFE 文 件 的 
上 上面。 如果 SWF 文件 包括 透明 度 ， 并 且 希 户 
DHTMEL 元 素 显 示 在 它们 的 后 面 ， 选 择 “ 透 
明 ” 选 项 。 

播放 : 在 “文档 ”窗口 中 播放 影片 。 

参数 ， 打 开 一 个 对 话 框 ， 可 在 其 中 输入 传递 | ; 
给 影片 的 附加 参数 。 影 片 必 须 已 设计 好 ， 可 | | 图 4.34 打开 网 页 文档 


以 接收 这 些 附 加 参数 。 : 
| 加 执行 “插入 ” | “媒体 ” | “Flash Video” 命令 ， 
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弹出 “插入 FLV” 对 话 框 ， 在 对 话 框 中 单 击 } 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 
URL 后 面 的 “浏览 ”按钮 ， 如 图 4-35 所 示 。 | 4-37 所 示 。 


二 大 浸 式 下 荔 入 师 


uc 
【信和 FLY 文人 的 相对 吕 寻 中 低 ) 


EYE IT 汪 7 = 


pla 


刘 开 比 


和 
© abit 
DD aaa 


DD in WE 


® 要 观看 计 频 ， 请 在 浏 点 各 中 韦 策 克 面 图 4-37 “插入 FLV?” 对 话 框 
人 | 国 单 击 “ 确 定 ” 按钮， 插入 视频 ， 如 图 4-38 
所 示 。 
在 弹出 的 “选择 FLV” 对 话 框 中 选择 视频 文 | 
® 和合 同 和 6。 | 国 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 ， 
Ss | 如 图 4-33 所 示 。 


Ea DATAE) 
RarepIey 


图 4-36 “选择 FLV” 对 话 框 
园 单 击 “ 确 定 ” 按 钮 ， 返 回 到 “插入 FLV” 对 | 图 4-38 ”插入 视频 


4 技术 拓展 S 


加 4.4.1 把 网 页 中 的 Flash 背 景 设 置 为 透明 


网 页 中 Flash 背 景 透明 不 是 在 做 Flash 的 时 候 设 置 的 ， 而 是 在 网 页 中 插入 Flash 设 置 的 ， 在 插 
入 的 时 候 默认 为 不 透明 的 。 

需要 将 Flash 动 画 的 背景 设置 为 透明 ， 在 Flash 动 画 的 “属性 ”面板 中 有 个 Wmode 参 数 ， 在 
下 拉 列 表 中 设置 参数 的 值 为 透明 ， 如 图 4-39 所 示 。 


图 4-39 ”Flash 背景 设置 为 透明 


@ 一 ee 一 第 4 章 EI 

Wmode 参 数 有 窗口 、 不 透明 、 透 明 3 个 参数 值 。“ 窗 口 ” 用 来 在 网 页 上 用 影片 自己 的 算 形 

窗口 来 播放 应 用 程序 。“ 窗 口 ”表明 Flash 应 用 程序 与 HTML 的 层 没有 任何 交互 ， 并 且 始 终 位 

于 最 项 层 。“ 不 透明 ” 使 应 用 程序 隐藏 页 面 上 位 于 它 后 面 的 所 有 内 容 。“ 透 明 ” 使 HIML 页 
的 背景 可 以 透 过 应 用 程序 的 所 有 透明 部 分 进行 显示 。 


肯 4.4.2 ”网 页 中 图 像 的 常见 格式 

网 页 中 图 像 的 格式 通常 有 3 种 ， 即 GIF、JPEG 和 PNG。 目 前 GIF 和 JPEG 文件 格式 的 支持 
情况 最 好 ， 大 多 数 浏览 器 都 可 以 查看 这 两 种 格式 的 文件 。 由 于 PNG 文 件 具 有 较 大 的 灵活 性 
并 且 文 件 较 小 ， 所 以 它 对 于 几乎 任何 类 型 的 网 页 图 像 都 是 最 适合 的 。 但 是 Microsoft Internet 
Explorer 和 Netscape Navigator 只 能 部 分 支持 PNG 图 像 的 显示 。 建 议 使 用 GIF 或 JPEG 格 式 以 满 
足 更 多 人 的 需求 。 
1，GIF 格 式 

GIF 是 英文 单词 Graphic Interchange Format 的 缩写 ， 即 图 像 交 换 格式 ， 文 件 最 多 使 用 256 种 
颜色 ， 最 适合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 例 如 导航 条 、 按 钮 、 图 标 、 徽 标 
或 其 他 具有 统一 色彩 和 色调 的 图 像 。 

GIF 格式 的 最 大 优点 就 是 制作 动态 图 像 ， 可 以 将 数 张 静 态 文件 作为 动画 帧 串联 起 来 ， 转 换 
成 一 张 动画 文件 。 

GIF 格式 的 另 一 优点 就 是 可 以 将 图 像 以 交错 的 方式 在 网 页 中 呈现 。 所 谓 交 错 显示 ， 就 是 当 
图 像 尚未 下 载 完 成 时 ， 浏 览 器 会 先 以 马赛 克 的 形式 将 图 像 慢 慢 显 示 ， 让 浏览 者 可 以 大 略 猜 出 下 
载 图 像 的 雏形 。 
2. JPEG 格 式 

JPEG 是 英文 单词 Joint Photographic Experts Group 的 缩写 ， 它 是 一 种 图 像 压 缩 格式 ， 文 件 格 
式 是 用 于 摄影 或 连续 色调 图 像 的 高 级 格式 ， 这 是 因为 JPEG 文 件 可 以 包含 数 百 万 种 颜色 。 随 着 
JPEG 文 件 品质 的 提高 ， 文 件 的 大 小 和 下 载 时 间 也 会 随 之 增加 。 通 常 可 以 通过 压缩 JPEG 文 件 在 
图 像 品质 和 文件 大 小 之 间 达 到 良好 的 平衡 。 

JPEG 格 式 是 一 种 压缩 格式 ， 专 门 用 于 不 含 大 色 块 的 图 像 。JPEG 的 图 像 有 一 定 的 失真 度 ， 
但 是 在 正常 的 损失 下 肉眼 分 辨 不 出 了 了 EG 和 GIF 图 像 的 区 别 ， 而 JPEG 文 件 只 有 GIF 文件 的 1/4 倍 大 
小 。JPEG 格 式 对 图 标 之 类 的 含 大 色 块 的 图 像 不 很 有 效 ， 而 且 不 支持 透明 图 、 动 态 图 ， 但 它 能 够 
保留 全 真 的 色调 板 格式 。 如 果 图 像 需 要 全 彩 模式 才能 表现 效果 ，JPEG 就 是 最 佳 的 选择 。 
3. PNG 格 式 

PNG 是 英文 单词 Portable Network Graphic 的 缩写 ， 即 便携 网 络 图 像 ， 是 一 种 替代 GIF 格 式 
的 无 专利 权限 制 的 格式 ， 它 包括 对 索引 色 、 灰 度 、 真 彩色 图 像 及 alpha 通 道 透明 的 支持 。PNG 是 
Fireworks 固 有 的 文件 格式 。PNG 文 件 可 保留 所 有 原始 层 、 矢 量 、 颜 色 和 效果 信息 ， 并 且 在 任何 
时 候 所 有 元 素 都 是 可 以 完全 编辑 的 。 文 件 必须 具有 .png 文 件 扩展 名 才能 被 Dreamweaver 识 别 为 


PNG 文 件 。 
实战 应 用 : 


@ 可 以 使 用 Dreamweaver 中 的 可 视 化 工具 向 页 面 添加 各 种 内 容 ， 包 括 文 
本 、 图 像 、 影 片 、 声 音 和 其 他 媒体 形式 等 。 在 本 章 中 学 习 了 图 像 和 多 媒体 的 添加 ， 本 节 将 通过 
实例 来 讲述 具体 的 应 用 。 
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轩 4.5.1 实战 1 一 一 创建 图 文 并 茂 的 “好 看 ”网 页 一 一 


文字 和 图 像 是 网 页 中 最 基本 的 元 素 。 在 
网 页 中 插入 图 像 会 使 得 网 页 更 加 生动 形象 。 
图 文 混 排 网 页 的 方法 非常 简 


在 网 站 中 创建 


单 ， 图 4-40 所 示 
作 步 骤 如 下 。 


原始 文件 : 原始 文件 /CH04/ 实 战 1/index.html 


最 终 文件 : 最 终 文件 /CH04/ 实 战 1/index1.html 
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图 4-40 


如 何 使 文字 和 图 片 内 容 共 处 ? 
在 Dreamweaver 中 ， 图 片 对 象 是 需要 独占 一 
行 的 ， 那 么 文字 内 容 只 能 在 与 其 平行 的 一 行 的 位 


置 上 ， 怎 么 样 才 可 以 让 文字 围绕 着 图 片 显示 呢 ? 


需要 选中 图 片 ， 


选择 “对 齐 ”|“ 右 对 齐 ” 命 令 ， 这 时 会 发 现 文字 
已 经 均匀 地 排列 在 图 片 的 右边 了 。 


国 打开 网 页 文档 ， 将 光标 置 于 要 插入 图 像 的 位 


的 是 图 文 混 排 的 效果 ， 具 体操 


图 4-42 “选择 图 像 源 文件 ” 对 话 框 
单 击 “ 确 定 ” 按 钮 ， 插 入 图 像 ， 如 图 4-43 
所 示 。 

园 选中 插入 的 图 像 ， 单 击 鼠标 右键 ， 在 弹出 
的 下 拉 菜 单 中 选择 “对 齐 ”|“ 右 对 齐 ” 命 
令 ， 如 图 4-44 所 示 。 
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单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 


置 ， 如 图 4-41 所 示 。 
加 “插入 ”|“ 图 像 ”|“ 图 像 ” 命 命令 ， 


图 4-43 ”插入 图 像 


出 “选择 图 像 源 文 件 ”对 语 框 ， 在 对 请 框 | 困 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 
中 选择 图 像 images/shuiguo.jpg， 如 图 4-42 如 图 4-40 所 示 。 


所 示 。 
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修改 图 像 的 高 度 和 宽度 的 
值 可 以 改变 图 像 的 显示 尺寸 ， 
但 是 这 并 不 能 改变 图 像 下 载 所 
用 的 时 间 ， 因 为 浏览 器 是 先 将 
图 像 数据 下 载 ， 然 后 才 改 变 图 


像 尺寸 的 。 要 想 减 少 图 像 下 载 
所 需要 的 时 间 ， 并 使 图 像 无 论 
什么 时 候 都 显示 相同 的 尺寸 ， 
建议 在 图 像 编辑 软件 中 ， 重 新 
处 理 该 图 像 ， 这 样 得 到 的 效果 
将 是 最 好 的 。 


下 面 通过 实例 讲述 在 网 

页 中 插入 背景 音乐 和 Flash 动 

画 ， 效 果 如 图 4-45 所 示 ， 具 

体操 作 步 骤 如 下 。 
原始 文件 : 原始 文件 /CHO4/ 

实战 2/index.html 
最 终 文 件 : 最 终 文件 /CHO4/ 
实战 2/indexl.html 

国 打开 网 页 文档 ， 将 光标 
置 于 要 插入 flash 动 画 的 位 
置 ， 如 图 4-46 所 示 。 

园 执行 “插入 ”|“ 媒 
体 ”| “Flash SWF” 命 
令 ， 弹 出 “选择 SWF” 对 
话 框 ， 在 对 话 框 中 选择 文 
件 top.swf， 如 图 4-47 所 示 。 
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图 4-44 设置 图 像 的 对 齐 方式 
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图 4-46 打开 网 页 文档 


图 4-47 


A 


“选择 SWF” 对 话 框 
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单 击 “ 确 定 ” 按 钮 ， 插 入 SWF 动画 ， 如 图 4-48 所 示 。 
园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 4-45 所 示 。 
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图 4-48 插入 动画 


课 后 练习 : 


@ 
一 、 填 空 题 
1. 网 页 中 图 像 的 格式 通常 有 3 种 ， 即 、 和 。 有 目前 和 交 件 
格式 的 支持 情况 最 好 ， 大 多 数 浏览 器 都 可 以 查看 这 两 种 格式 的 文件 。 
2. 在 网 页 中 插入 可 以 增加 网 页 的 动感 ， 使 网 页 更 具 吸引 力 ， 因 此 多 媒体 元 素 在 网 
页 中 应 用 越 来 越 广泛 。 
二 、 操 作 题 


1. 给 图 4-49 所 示 的 网 页 创建 鼠标 经 过 图 像 效 果 ， 鼠标 经 过 时 的 状态 如 图 4-50 所 示 。 


图 4-49 起 始 文件 图 4-50 ”和 饼 标 经 过 时 的 效果 


@ 一 o 第 4 章 4 章 添加 图 像 入 媒体 


原始 文件 : 原始 文件 /CHO 4 /操作 题 1/index.html 
最 终 文件 : 最 终 文件 /CHO 4 /操作 题 l/indexlhtml 

将 光标 置 于 要 插入 鼠标 经 过 图 像 的 位 置 ， 执 行 “插入 ”|“ 图 像 ”|“ 鼠 标 经 过 图 像 ” 命 令 ， 弹 出 
“插入 鼠标 经 过 图 像 ” 对 话 框 ， 如 图 4-51 所 示 。 

园 在 对 话 框 中 单 击 “ 原 始 图 像 ”文本 框 右边 的 “浏览 ”按钮 ， 在 弹出 的 “原始 图 像 :， ”对 话 框 中 
选择 图 像 images/200933091340937.jpg， 如 图 3-52 所 示 。 


2009330918233 2009330924268 
3a0jpe 16jpe 


Rl 
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[a] Ce Cw 
图 4-51 “插入 鼠标 经 过 图 像 ” 对 话 杠 图 4-52 “原始 图 像 : ”对 话 框 
国 单 击 “ 确 定 ” 按 钮 ， 在 对 话 框 中 单 击 “ 鼠 标 经 过 图 像 ”文本 框 右边 的 “浏览 ”按钮 ， 在 弹出 的 
“鼠标 经 过 图 像 : ”对 话 框 中 选择 图 像 images/200933091823330.jpg， 如 图 4-53 所 示 。 
园 单 击 “确定 ”按钮 ， 返 回 到 “插入 鼠标 经 过 图 像 ”对 话 框 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 插入 鼠标 


图 4-53 “ 电 标 经 过 图 像 : ”对 话 框 
给 图 4-54 所 示 的 网 页 插入 Flash 动 画 ， 效 果 如 图 4-55 所 示 。 
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图 4-54 原始 文件 图 4-55 插入 Flash 动 画 效果 
ol 


课堂 实录 “ee 一 全 
原始 文件 : 原始 文件 /CH04/ 操 作 题 2/index.html 
最 终 文 件 : 最 终 文件 /CH04/ 操 作 题 2/indexl.html 
国 将 光标 置 于 要 插入 Flash 动 画 的 位 置 ， 执 行 “ 插 入 ”| “媒体 ”| “Flash SWF” 命 令 ， 弹 出 “选择 
文件 ”对 话 框 ， 在 对 话 框 中 选择 top.swf， 如 图 4-56 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 即 可 插入 Flash 动 画 。 


roots 四 
En ATA E) 
RAK FI ~ 


rzm ED ER 
[aa Ce Ew 


图 4-56 “选择 SWF” 对 话 框 


@ 在 网 页 的 适当 位 置 放置 一 些 图 像 和 多 媒体 ， 不 仅 使 内 容 清 晰 易 懂 ， 而 
且 更 具 吸 引力 。 本 章 主要 学 习 了 网 页 中 图 像 的 基本 操作 、 特 殊 图 像 效 果 的 插入 、 网 页 背景 音乐 
的 添加 、Flash 影 片 的 使 用 、 在 网 页 中 插入 视频 文件 和 其 他 媒体 对 象 的 插入 等 。 本 章 的 重点 是 图 
像 的 插入 和 使 用 、Flash 的 插入 和 使 用 ， 以 及 Java Applet 的 使 用 。 图 像 和 多 媒体 作为 网 页 的 重要 
元 素 ， 可 以 使 页 面 的 效果 更 加 生动 ， 网 站 的 内 容 更 加 丰富 ， 读 者 一 定 要 好 好 掌握 其 要 领 。 
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第 5 章 


人 


本 章 导 读 
表格 是 网 页 布局 设计 的 常用 工具 ， 表 格 在 
网 页 中 不 仅 可 以 用 来 排列 数据 ， 而 且 可 以 对 页 面 
中 的 图 像 、 文 本 等 元 素 进行 准确 地 定位 ， 使 页 面 
在 形式 上 既 丰 富 多 彩 又 有 条 理 ， 从 而 使 页 面 显得 
更 加 整齐 有 序 。 使 用 表格 排版 的 页 面 在 不 同 平 
台 、 不 同 分 辨 率 的 浏览 器 中 都 能 保持 原 有 的 布 
局 ， 所 以 表格 是 网 页 布局 中 最 常用 的 工具 。 本 章 
主要 讲述 表格 的 创建 、 表 格 属性 的 设置 、 表 格 的 
基本 操作 、 表 格 的 排序 和 导入 表格 式 数据 等 。 


掌握 插入 表格 和 表格 元 素 


掌握 选择 表格 元 素 
掌握 表格 的 基本 操作 
掌握 排序 及 整理 表格 内 容 
掌握 网 页 圆 角 表格 的 制作 
掌握 利用 表格 排列 数据 
掌握 网 页 圆 角 表格 的 制作 


EE 识 党 实录 。。 一 全 


人 | 插入 表格 和 表格 元 素 


在 开始 制作 表格 之 前 ， 先 对 表格 的 各 部 分 名 称 做 简单 介绍 。 表 格 F 


行 、 列 和 单元 格 3 部 分 组 成 。 
六 一 张 表 格 横 向 称 为 行 ， 纵 向 称 为 列 。 行 列 交叉 部 分 就 称 为 单元 格 。 
六 ”单元 格 中 的 内 容 和 边框 之 间 的 距离 称 为 边 距 。 

六 ”单元 格 和 单元 格 之 间 的 距离 称 为 间距 。 

六” 整 张 表 格 的 边缘 称 为 边框 。 

I 


15.1.1 课堂 练 一 a 
在 Dreamweaver 中 ， 表 格 可 以 用 于 制作 简 | 单 击 “ 确 定 ” 按 钮 ， 插 入 表格 ， 如 图 5-3 

单 的 图 表 ， 还 可 以 用 于 安排 网页 文档 的 整体 | 所 示 。 

布局 ， 起 着 非常 重要 的 作用 。 在 网 页 中 插入 | [生生 

表格 的 方法 非常 简单 ， 具 体操 作 步 又 如 下 。 ”| > ee 

国 打开 网 页 文档 ,执行 “插入 ”| “表格 ” 命 | 
令 ， 如 图 5-1 所 示 。 :| 


有 


EEC 


| 图 5-3 插入 表格 
PO 
“1 在 “常用 ”插入 栏 中 单 去 表格 按钮 晶 ， 弹 出 上 
| 1 “表格 ”对 话 框 。 1 
图 5-1 打开 网 页 文档 和 WE 
弹出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 | 在 “表格 ”对 话 框 中 可 以 进行 如 下 设置 。 
数 ” 设 置 为 3，“ 列 数 ”设置 为 1，“ 表 格 | 太 “ 行 数 ”: 在 文本 框 中 输入 新 建 表 格 的 
宽度 ”设置 为 60%， 如 图 5-2 所 示 。 | 行 数 。 


| 胡 “ 列 数 ”: 在 文本 框 中 输入 新 建 表格 的 
| 列 履 。 

| 太 “表格 宽度 ”: 用 于 设置 表格 的 宽度 ， 其 
| 中 右边 的 下 拉 列 表 中 包含 百分比 和 像素 。 
| 大 “边框 粗细 ”: 用 于 设置 表格 边框 的 宽 
| 度 ， 如 果 设置 为 0， 在 浏览 时 则 看 不 到 表 


| 格 的 边框 。 
”大 “单元 格 边 距 ”: 单元 格 内 容 和 单元 格 
| 边界 之 间 的 像素 数 。 


“单元 格 间 距 ”: 单元 格 之 间 的 像素 数 。 
“标题 ”: 可 以 定义 表 头 样式 ，4 种 样式 


对 对 


图 5-2 “表格 ”对 话 框 


@ 一 ee 第 5 章 了 ZA 
| 六 “看 分 比 ”s 


可 以 任 选 一 种 。 


太 “辅助 功能 ”: 定义 表格 的 标题 。 


太 “标题 ”: 用 来 定义 表格 标题 的 对 齐 | 


方式 。 


六 “摘要”: 用 来 对 表格 进行 注释 。 


| 克 “CellSpace” 
1 如 果 没 有 明确 指定 单元 格 间距 和 单元 格 边 距 上 | 
上 的 位， 大 多 数 浏 览 器 部 将 单元 格 边 收 设 团 为 1, 单 有 ， “Alicny 
下 元 格 间距 设置 为 来 显示 表格 。 若 要 确保 浏览 器 不 且 上 

1 显示 表格 中 的 边 距 和 间距 ， 可 以 将 单元 格 边 距 和 目 ; 


上 间距 设置 为 0。 大 多 数 浏览 器 按 边 框 设置 为 1 显示 上 | 
1 


上 表格 。 


肝 5.1.2 ”设置 表格 属性 一 一 一 


创建 完 表格 后 可 以 根据 实际 需要 对 表格 | 


的 属性 进行 设置 ， 如 宽度 、 边 框 、 对 齐 等 ， 
也 可 只 对 某 些 单元 格 设置 。 


设置 表格 属性 之 前 首先 要 选中 表格 ,在 ; 
“属性 ”面板 中 将 显示 表格 的 属性 ， 并 进行 | 
i std is 


图 5-4 设置 表格 属性 

表格 “属性 ”面板 参数 如 下 。 

大 “表格 ”: 输入 表格 的 名 称 。 

太 “ 行 ” 和 “Cols”: 
列 数 。 

太 “ 宽 ”: 

ee 

大 “像素 ”: 

友信 是 信人 这 时 表格 的 宽度 是 绝对 
宽度 ， 不 随 浏览 器 窗口 的 变化 而 变化 。 


;大 “Cellpad” : 


难 对 对 对 对 


| 接 输入 文本 ， 
| 编辑 文本 ， 然 后 将 文本 拷贝 到 表格 里 ， 这 也 
| 是 在 文档 中 添加 文本 的 一 种 简洁 
| | 方法 。 


输入 表格 的 行 数 和 
输入 表格 的 宽度 ， 其 单位 可 以 


择 该 项 ， 表 明 该 表格 的 宽 | 


选择 该 项 ， 表 明 该 表格 的 宽 
度 值 是 表格 宽度 与 浏览 器 窗口 宽度 的 百 分 
比 数值 。 这 时 表格 的 宽度 是 相对 宽度 ， 会 
随 着 浏览 器 窗口 大 小 的 变化 而 变化 。 

单元 格 内 容 和 单元 格 边 界 


之 间 的 像素 数 。 

: 相 邻 的 表格 单元 格 间 的 
像素 数 。 

: 设置 表格 的 对 齐 方式 ， 有 
“上 默认”、“ 左 对 齐 ”、“ 居 中 对 齐 ” 
和 “ 右 对 齐 ”4 个 选项 。 

“Border”: 用 来 设置 表格 边框 的 宽度 。 
总 用 于 清除 列 宽 。 

部 将 表格 宽 由 百分比 转 为 像素 。 

部 将 表格 宽 由 像素 转换 为 百分比 。 

部 用 于 清除 行 高 。 


,用 5.1.3 ”添加 内 容 到 单元 格 一 


表格 建立 以 后 ， 就 可 以 向 表格 中 添加 各 


| 种 元 素 了 ， 如 文本 、 图 像 、 表 格 等 。 在 表格 


中 添加 文本 就 同 在 文档 中 操作 一 样 ， 除 了 直 
还 可 以 先 利用 其 他 文本 编辑 器 


快速 的 


在 单元 格 中 插入 图 像 时 ， 如 果 单 元 格 的 


| 尺寸 小 于 插入 图 像 的 尺寸 ， 则 插入 图 像 后 单 
元 格 的 尺寸 自动 增高 或 者 增 宽 。 


将 光标 置 于 单元 格 中 ， 然 后 在 每 个 单元 


格 中 分 别 痊 入 相应 的 文字 如 图 5.5 所 示 


图 5-5 添加 内 容 到 单元 格 


EE 识 党 实录 。。 一 全 


EW Og ee es BOER EE SO EE 
上 怎样 才能 将 800X600 分 辩 率 下 生成 的 网 页 在 1024X768 下 居中 显示 ? I 
上 把 页 面 内 容 放 在 一 个 宽 为 778 的 大 表格 中 ， 把 大 表格 的 对 齐 方式 设置 为 居中 对 齐 。 宽 度 定 为 778 是 为 了 用 
上 在 800X600 下 窗口 不 出 现 水 平 滚动 条 ， 也 可 以 根据 需要 进行 调整 。 如 果 要 加 快 关键 内 容 的 显示 ， 也 可 以 把 上 
有 内 容 拆 开 放 在 几 个 坚 向 相连 的 大 表格 中 。 I 
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处 理 表格 时 经 常 要 选择 表格 中 的 一 个 或 多 个 单元 格 ， 或 者 选择 整 行 整 
列 单元 格 ， 这 时 可 以 根据 具体 情况 使 用 不 同 的 方法 选择 单元 格 。 


虽 5.2.1 选取 表格 


要 想 对 表格 进行 编辑 ， 那 么 首先 选择 它 ， 主 要 有 以 下 几 种 方法 选取 整个 表格 。 
太 ”将 光标 置 于 表格 的 左上 角 ， 按 住 鼠 标的 左 键 不 放 ， 拖 蝶 鼠 标 指针 到 表格 的 右 下 角 ， 将 整个 
rs 单 击 鼠标 的 右键 ， 在 弹出 的 菜单 中 选择 “表格 ”|“ 选 择 表 格 ” 命 
， 如 图 5-6 所 示 。 


太 单 击 表格 达 和 线 的 任意 位置 即 可 选中 表格 ， 如 图 5-7 所 示 。 


于 - 国 


图 5-6 执行 “选择 表格 ”命令 图 5-7 单 击 表格 边框 线 
太 ”将 光标 置 于 表格 内 任意 位 置 ， 执 行 “ 修 改 ”|“ 表 格 ”|“ 选 择 表 格 ”命令 ， 如 图 5-8 所 示 。 
太 将 光标 置 于 表格 内 任意 位 置 ， 2 签 ， 如 图 5-9 所 示 


OW R00 十 = 


图 5-8 执行 “选择 表格 ”命令 图 5-9 选择 <table> 标 答 


@ 一 ee 一 第 5 章 了 EA 


由 5.2.2 ”选取 行 或 列 - o 
选择 表格 的 行 与 列 也 有 两 种 不 同 的 方法 。 

太 “ 当 鼠标 位 于 要 选择 行 首 或 列 项 时 ， 鼠 标 指针 形状 变 成 了 黑 箭头 时 ， 单 击 鼠标 左 键 ， 即 可 以 
选中 列 或 行 ， 如 图 5-10 所 示 和 图 5-11 所 示 。 


DW amn sma sa SN Vem wriol se wet) BOW m0 me- tH ol | Dw zan sus se SND Wam Wao sro er DOW sm 


可 面 5l=1e[ x 
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图 5-10 ”选择 列 图 5-11 选择 行 


六” 按 住 鼠 标 左 键 不 放 ， 从 左 至 右 或 者 从 上 至 下 拖 提 ， 即 可 选中 列 或 者 行 ， 如 图 5-12 所 示 和 图 
5-13 所 示 。 


Wi) weiol Seed) mn me- SH Ol=lel x 


图 5-12 选择 列 图 5-13 选择 行 


旧 5.2.3 ”选取 单元 格 9 
选择 表格 中 的 单元 格 有 两 种 方式 ， 一 种 是 选择 单个 单元 格 ， 另 一 种 是 选择 多 个 单元 格 。 
按 住 Ctrl 键 ， 然 后 单 击 要 选中 的 单元 格 即 可 。 

将 光标 移 到 要 选中 的 单元 格 中 并 单 击 释 放 ， 按 住 Ctl 十 A 快捷 键 ， 即 可 选中 该 单元 格 。 

将 光标 置 于 要 选中 的 单元 格 中 ， 执 行 “编辑 ”|“ 全 选 ”命令 ， 即 可 选中 该 单元 格 。 

将 光标 置 于 要 选择 的 单元 格 内 ， 单 击 文档 窗口 左下 角 的 <td> 标 签 可 以 将 单元 格 选择 。 

按 住 Shift 键 不 放 ， 并 单 击 选择 多 个 单元 格 中 的 第 一 个 和 最 后 一 个 ， 可 以 选择 多 个 相 邻 的 单 
元 格 。 

按 住 Ctl 键 不 放 ， 单 击 并 选择 多 个 单元 格 ， 可 以 选择 多 个 相 邻 或 不 相 邻 的 单元 格 ， 如 图 5-14 
所 示 


对 对 对 对 对 


对 


oF 
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图 5-14 选择 不 相 邻 的 单元 格 


表格 的 基本 操作 


@ 创建 了 表格 后 ， 用 户 要 根据 网 页 设置 需要 对 表格 进行 处 理 ， 例 如 调整 
表格 和 单元 格 的 大 小 、 添 加 或 删除 行 或 列 、 拆 分 单元 格 、 剪 切 复制 和 粘贴 单元 格 等 ， 熟 练 掌握 
表格 的 基本 操作 ， 可 以 提高 制作 网 页 的 速度 。 


调整 表格 和 单元 格 的 大 小 一 一 
“属性 ”面板 中 的 “ 宽 ” 和 “高 ”文本 框 能 精确 地 调整 表格 的 大 小 ， 而 用 鼠标 拖 动 调整 
凡人 调整 表格 大 小 的 方法 如 下 。 
太 ”调整 表格 的 宽 ， 选中 整个 表格 ， 将 光标 置 于 表格 右边 框 控制 点 是 上 ， 当 光标 变 成 双 箭头 局 
时 ， 如 图 -15 所 示 ， 拖 动 忆 标 ， 即 可 调整 表格 浆 体 宽度， 调整 后 的 效果 如 图 $-16 所 示 。 


4 一 : 全 
图 5-15 调整 表格 的 宽 图 5-16 调整 表格 的 宽 后 


太 ”调整 表格 的 高 : 选中 整个 表格 ， 将 光标 置 于 表格 底 边 框 控制 点 上 ， 当 光标 变 成 双 箭头 示 
时 ， 如 图 5-17 所 示 ， 拖 动 鼠 标 即 可 调整 表格 整体 高 度 ， 调 整 后 的 效果 如 图 5-18 所 示 。 

太 ”同时 调整 表格 的 宽 和 高 ,选中 整个 表格 ， 将 光标 置 于 表格 右 下 角 控制 点 站 上 ， 当 光标 变 成 
双 箭头 型 时 ， 如 图 $-19 所 示 ， 拖 动 鼠 标 即 可 调整 表格 整体 高 度 和 宽度 ， 各 列 会 被 均匀 调 
整 ， 调 整 后 的 效果 如 图 5-20 所 示 。 
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图 5-17 调整 表格 高 图 5-18 调整 表格 高 后 
[EEC ] 


| [3 


图 5-19 调整 表格 的 宽 和 高 图 5-20 调整 表格 宽 和 高 后 


将 光标 置 于 要 设置 大 小 的 单元 格 中 ， 用 “属性 ”面板 中 的 “ 宽 ” 和 “高 ”文本 框 能 精确 地 


调整 单元 格 的 大 小 ， 而 用 鼠标 拖 动 调整 则 显得 更 为 方便 快捷 ， 调 整 单元 格 大 小 的 方法 


如 下 。 


调整 列 宽 ， 将 光标 置 于 表格 右边 的 边框 上 ， 当 鼠标 变 成 为 由 时 ， 拖 动 鼠 标 即 可 调整 最 后 一 列 单 


元 格 的 宽度 ， 如 图 5-21 所 示 ， 调 整 后 的 效果 如 图 5-22 所 示 。 同 时 也 调整 表格 的 宽度 。 
的 行 不 影响 ， 将 光标 置 于 表格 中 间 列 边框 上 ， 当 鼠标 变 成 Iy 时 ， 拖 动 鼠标 可 以 调整 
两 边 列 单元 格 的 宽度 。 


对 于 其 他 
h 间 列 边框 


图 5-21 调整 列 宽 图 5-22 ”调整 列 宽 后 
园 调整 行 高 ， 将 光标 置 于 表格 底部 边框 或 者 中 间 行 线 上 ， 当 光标 变 成 地 时 ， 拖 动 鼠标 即 可 调整 该 


上 面 一 行 单元 格 的 高 度 ， 如 图 5-23 所 示 ， 对 于 其 他 的 不 影响 ， 调 整 行 高 后 效果 如 图 5-24 所 示 。 
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全 名 称 。 丙 科 人 款 。。 效 布 时 间 。。 工交 和 
320t44047 面议 


队 izleJ7 面议 


图 5-23 ”调整 行 高 图 5-24 调整 行 高 后 


虽 5.3.2 添加 或 删除 行 或 列 - O 
可 以 执行 “修改 ”|“ 表 格 ” 菜 单 中 的 子 命令 ， 增 加 或 减少 行 与 列 。 增 加 行 与 列 可 以 用 以 下 

太 ”将 光标 置 于 相应 的 单元 格 中 ， 执 行 “ 修 改 ”|“ 表 格 ”|“ 插 入 行 ” 命 令 ， 即 可 插入 一 行 。 

太 ”将 光标 置 于 相应 的 位 置 ， 执 行 “ 修 改 ”|“ 表 格 ”|“ 插 入 列 ” 命 令 ， 即 可 在 相应 的 位 置 插入 
一 列 。 

太 ”将 光标 置 于 相应 的 位 置 ， 执 行 “ 修 改 ”|“ 表 格 ”|“ 插 入 行 或 列 ” 命 令 ， 弹 出 “插入 行 或 
列 ” 对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 5-25 所 示 。 单 击 “ 确 定 ” 按 钮 ， 即 可 在 相 
应 的 位 置 插入 行 或 列 ， 如 图 5-26 所 示 。 


图 5-25 “插入 行 或 列 ” 对 话 框 图 5-26 插入 行 


上 在 “插入 行 或 列 ” 对 话 框 中 可 以 进行 如 下 设置 。 I 
上 插入 包含 “ 行 ” 和“ 列 ”两 个 单 选 按钮， 一 次 只 能 选择 其 中 一 个 来 插入 行 或 者 列 。 该 选项 组 的 初 姑 上 
上 状态 选择 的 是 “ 行 ” 选项， 所 以 下 面 的 选项 就 是 “ 行 数 ”。 如 果 选 择 的 是 “ 列 ” 选 项 ， 那 么 下 面 的 选 上 
上 项 就 变 成 了 “ 列 数 ”， 在 “ 列 数 ”选项 的 文本 框 内 可 以 直接 输入 要 插入 的 列 数 。 I 
征文 位 置 ， 包 仿 “所 选 之 上 ”和 “所 选 之 下 ”两 个 单 选 按 钮 。 如 果 “ 插 入 ”选项 选择 的 是 “ 列 ”选项 ， 于 上 
和 么 “位 置 ” 选项 后 面 的 两 个 单 选 按钮 就 会 变 成 “在 当前 列 之 前 ”和 “在 当前 列 之 后 ”。 
删除 行 或 列 有 以 下 几 种 方法 。 
太 ”将 光标 置 于 要 删除 行 或 列 的 位 置 ， 执 行 “ 修 改 ”|“ 表 格 ”|“ 删 除 行 ”命令 ， 或 执行 “ 修 
改 ”| “表格 ”|“ 删 除 列 ” 命 令 ， 即 可 删除 行 或 列 ， 如 图 5-27 所 示 。 
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太 选中 要 删除 的 行 或 列 ， 执 行 “ 编 : Ss 
R A | 提示 S000 
辑 ”| “清除 ”命令 ， 即 可 删除 行 或 列 。 
拆 分 单元 格 还 有 以 下 两 种 方法 ， 如 下 所 述 。 用 
将 光标 置 于 拆 分 的 单元 格 中 ， 单 去 饼 标 右 用 


:1 
1x 
| 下。 链 ， 在 弹出 的 菜单 中 选择 “表格 ”|“ 拆 分 单 | 
| 有 元 格 ” 命 令 ， 弹 出 “ 拆 分 单元 格 ” 对 话 框 ， 目 
| | 
1 
I 


女 选中 要 删除 的 行 或 列 ， 按 Delete 键 或 按 | 
BackSpace 键 也 可 删除 行 或 列 。 : 


然后 进行 相应 的 设置 。 
单 击 属性 面板 中 的 “ 拆 分 单元 格 为 行 或 列 ” 按 目 
钮 下， 它 往往 是 创建 复杂 表格 的 重要 步骤 。 目 


NS.3.4 合并 单元 格 - 

| 合并 单元 格 就 是 将 选中 表格 单元 格 的 
| 内容 合并 到 一 个 单元 格 。 合 并 单元 格 ， 首 
| 先 将 要 合并 的 单元 格 选中 ， 然 后 执行 “ 修 


图 5-27 删除 行 | 改 ”| “表格 ”|“ 合 并 单元 格 ” 命令， 将 多 个 
| i | 单元 格 合并 成 一 个 单元 格 。 或 选中 单元 格 ， 
佣 5.3.3 ” 拆 分 单元 格 ”上 单 击 鼠 标 右 键 ， 在 弹出 的 菜单 中 选择 “ 表 


在 使 用 表格 的 过 程 中 ， 有 时 需要 拆 分 单 | 格 ”|“ 合 并 单元 格 ”命令 ， 将 多 个 单元 格 合 
元 格 以 达到 自己 所 需 的 效果 。 拆 分 单元 格 就 ; 并 成 一 个 单元 格 ， 如 图 5-30 所 示 。 
是 将 选中 的 表格 单元 格 拆 分 为 多 行 或 多 列 ， 
具体 操作 步 又 如 下 。 | 
国 将 光标 置 于 要 拆 分 的 单元 格 中 ， 执 行 “ 修 | 
改 ”| “表格 ”|“ 拆 分 单元 格 ”命令 ， 弹 出 | 
“ 拆 分 单元 格 ” 对 话 框 ， 如 图 $-28 所 示 。 : 
a 要 


图 5-28 “ 拆 分 单元 格 ” 对 话 框 


5-30 合并 单元 格 


园 在 对 话 框 中 的 “把 单元 格 拆 分 ”选择 为 | 
“Bj” “ 行 数 ” 设置 为 3， 单 击 “确定 ” : pt 
按钮 ， 即 可 将 单元 格 拆 分 ， 如 图 5-29 所 示 。 | 有 ”也 可 以 单 击 “ 属 性 ”面板 中 的 “合并 所 选单 


上 元 格 ， 使 用 跨度 ”按钮 局， 它 往往 是 创建 复杂 表 上 
有 格 的 重要 步骤 。 | 


| 5.3.5 剪 切 、 复 制 、 粘 贴 单 
| 元 格 © 


| ”选中 表格 后 执行 “编辑 ”| “拷贝 ” 命 

| 令 ， 或 者 按 Ctrl 十 C 快 捷 键 就 可 将 选中 的 表格 

| 复制 到 剪贴 板 上 ， 而 执行 “编辑 ”|“ 剪 切 ” 

| 命令， 或 者 按 Ctrl 十 X 快 捷 键 也 可 以 将 选中 的 
图 5-29 拆 分 单元 格 | 表格 复制 到 剪贴 板 上 ， 如 图 5-31 所 示 。 执 行 

A 
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图 5-31 选择 “ 找 贝 ”命令 图 5-32 ”粘贴 表格 


排序 及 整理 表格 内 容 


® 为 了 更 加 快速 而 有 效 地 处 理 网 页 中 的 表格 和 内 容 ，Dreamweaver CC 
提供 了 多 种 自动 处 理 功 能 ， 包 括 导 入 表格 数据 和 排序 表格 等 。 本 节 将 介绍 表格 自动 化 处 理 技 
巧 ， 以 提升 网 页 表格 设计 技能 。 


用 5.4.1 课堂 练 一 练 一 一 导入 表格 式 数据 
Dreamweaver 中 导入 表格 式 数 据 功 能 能 够 ; 国 打开 网 页 文档 ， 将 光标 置 于 要 导入 表格 式 数 
根据 素材 来 源 的 结构 ， 为 网 页 自动 建立 相应 的 ; 措 的 位于 ， 如 图 5-34 所 示 。 
表格 ， 并 自动 生成 表格 数据 ， 因 此 ， 当 遇 到 大 | 区 2 
篇 幅 的 表格 内 容 编排 ， 而 手头 又 拥有 相关 表格 | 
式 素材 时 ， 便 可 使 网 页 编排 工作 轻松 得 多 。 
原始 文件 : 原始 文件 /CH05/5.4.L/index.html 
最 终 文件 : 最 终 文件 /CH05/5.4.Uindexl html : 
下 面 通过 实例 讲述 导入 表格 式 数据 ， 效 | 
果 如 图 5-33 所 示 ， 具 体操 作 步 骤 如 下 。 | 


| 图 5-34 打开 网 页 文档 

i 园 执行 “文件 ”|“ 导 入 ”|“ 导 入 表格 式 数 

| 据 ” 命 令 ， 弹 出 “导入 表格 式 数据 ”对 话 
框 ， 在 对 话 框 中 单 击 “ 数 据 文 件 ” 文 本 框 
右边 的 “浏览 ” 按钮 ， 如 图 5- 35 所 示 。 


图 5-33 导入 表格 式 数据 效果 | 图 5-35 “导入 表格 式 数据 ”对 话 框 
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上 下 设置 。 


上 女 数据 文件 ， 输入 要 导入 的 数据 文件 的 保存 路 上 | 
径 和 文件 名 ， 或 单 击 右边 的 “浏览 ”按钮 进 目 ; 
1 


行 选择 。 


ee 


长 文件 进行 调整 的 表格 。 
输入 表格 的 宽度 ， 以 及 设置 其 单位 。 


的 像素 数 。 


强 出 “打开 ”对 话 框 ， 在 对 话 杠 中 选择 数据 | 据 的 表格 而 言 ， 是 根据 表格 列表 中 的 数据 来 
”排序 的 。 下 而 通过 实例 讲述 排序 表格 ， 效 果 


| 如 图 5-39 所 示 ， 具 体操 作 步 骤 如 下 。 


文件 ， 如 图 5-36 所 示 。 


图 5-36 


“打开 ”对 话 框 : 
园 单 击 “打开 ”按钮 ， 将 文件 添加 到 文本 框 | 
中 ， 在 对 话 框 中 的 “ 定 界 符 ” 下 拉 列表 中 | 


选择 “过 点 ”选项 ， 
“匹配 内 容 ” 单 选项 ， 如 图 5-37 所 示 。 


计 提 六 件 ETe57775T7 同 页 前 帮 瑟 如 证 [3 Cu 
定 8F ES 

表格 离 度 司 匹配 内 容 

A 


EE +] 


i 3。 和 式 ( 划 国 了 可 


图 5-37 “导入 表格 式 数据 ”对 话 框 
园 单 击 “确定 ”按钮 ， 导 入 表格 式 数 据 ， 
5-38 所 示 。 
国 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 
如 图 5-33 所 示 。 


如 图 


和 一 1 |Dw zsm mad EM sm seo Wp) ed Say gDW me 
提示 mm 


上 “ 突 “ 导 入 表格 式 数据 ”对 话 框 中 可 以 进行 如上 
|: 


定 界 符 ; 选择 定 界 符 ， 使 之 与 导入 的 数据 文 是 | 
件 格式 匹配 。 有 “Tab”、“ 运 点 ”、“ 分 上 | 
“引号 ”和 “其 他 ”5 个 选项 。 1 
表格 宽度 : 设置 导入 表格 的 宽度 。 1 
匹配 内 容 ， 为 选 此 单 选 项 ， | i 


设置 为 ， 习 选 此 单 选项 ， 在 后 面 的 文本 框 中 目 
上 .1 在 导入 数据 表格 时 注意 定 界 符 必须 是 运 号 ， 上 
1 


单元 格 边 距 : 单元 格 内 容 和 单元 格 边界 之 间 且 | 目 否则 可 能 会 造成 表格 格式 的 混乱 。 
| 


单元 格 间距 相 邻 的 表格 单元 格 间 的 像素 数 。 目 | 


“表格 宽度 ”选中 | 


效果 | 


EXE ma 


图 5-38 导入 表格 式 数据 


人 


. 5.4.2 课堂 练 一 练 一 一 排序 


格式 化 首 行 ， 设 置 首 行 标题 的 格式 。 1 
边框 :以 像素 为 单位 设置 表格 边框 的 宽度 。 上 | 


表格 
排序 表格 的 主要 功能 是 针对 具有 格式 数 


原始 文件 : 原始 文件 /CH05/5.4.2/index.html 
最 终 文件 :最 终 文件 /CHO5/5.4.2/index1 html 


| 图 5-39 排序 表格 效果 
| 国 打开 网 页 文档 ， 如 图 5-40 所 示 。 


| 园 执行 “命令 ”| “排序 表格 ”命令 ， 弹 出 
| “排序 表格 ”对 话 框 ， 在 对 话 框 中 将 “ 排 
序 按 ” 设 置 为 “ 列 3”，“ 顺 序 ”设置 为 
“ 按 数 字 顺 序 ”， 在 右边 的 下 拉 列 表 中 选 
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择 “降序 ”选项 ， 如 图 5-41 所 示 。 


[7 和 加 0 


壕 了 站 二 多 和 弟 一 行 
DD 和 
DS 
加 寺 扎 关 字 后 所 上 行 了 保持 不 究 


图 5-40 ”打开 网 页 文档 图 5-41 “排序 表格 ”对 话 框 
SR 
上 在 “排序 表格 ”对 话 框 中 可 以 设置 如 下 。 I 

排序 按 : 确定 哪个 列 的 值 将 用 于 对 表格 排序 。 I 
顺序 ， 确 定 是 按 字母 还 是 按 数字 顺序 以 及 升序 还 是 降序 对 列 排序 。 1 


再 按 确定 在 不 同 列 上 第 二 种 排列 方法 的 排列 顺序 。 在 其 后 面 的 下 拉 列 表 中 指定 应 用 第 二 种 排列 方法 
的 列 ， 在 后 面 的 下 拉 列 表 中 指定 第 二 种 排序 方法 的 排序 顺序 。 I 
排序 包含 第 一 行 ， 指 定 表格 的 第 一 行 应 该 包括 在 排序 中 。 I 
排序 标题 行 ， 指 定 使 用 与 body 行 相同 的 条 件 对 表格 thead 部 分 中 的 所 有 行 排序 。 I 
排序 脚注 行 : 指定 使 用 与 body 行 相同 的 条 件 对 表格 tfoot 部 分 中 的 所 有 行 排序 。 1 

覃 


Dp 


完成 排序 后 所 有 行 颜 色 保持 不 变 : 指定 排序 之 后 表格 行 属性 应 该 与 同一 内 容 保持 关联 。 
ee 0 
单 击 “ 确 定 ” 按 钮 ， 对 表格 进行 排序 ， 如 图 5-42 所 示 。 

园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 5-39 所 示 。 


Dw 
ND 


Di 


图 5-42 ”对 表格 进行 排序 


实战 应 用 


@ 表格 最 基本 的 作用 就 是 让 复杂 的 数据 变 得 更 有 条 理 ， 让 人 容易 看 懂 。 
在 设计 页 面 时 ， 往 往 要 利用 表格 来 布局 定位 网 页 元 素 。 下 面 通过 两 个 实例 掌握 表格 的 使 用 方法 。 
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实战 1 一 一 利用 表格 排列 数据 


网 页 上 很 多 的 表格 都 是 细 线 表格 ， 因 此 | 
读者 也 一 定 要 熟练 掌握 。 下 面 通 过 实例 讲述 ; 
创建 细 线 表格 ， 效 果 如 图 5-43 所 示 ， 具 体操 作 ; 


1N5.5.1 


步骤 如 下 。 
原始 文件 : 原始 文件 /CH05/ 实 战 1/index.html 


最 终 文件 : 最 终 文件 /CH05/ 实 战 1/index1.html 


wan 


图 5-43 ”创建 细 线 表格 效果 


国 打开 网 页 文档 ， 将 光标 置 于 要 插入 表格 的 位 | 


置 ， 如 图 5-44 所 示 。 


图 5-44 ”打开 网 页 文档 
执行 “插入 ”| “表格 ”命令 ， 弹 出 “ 表 ; 
格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ”设置 
为 2，“ 列 数 ” 设 置 为 !， 如 图 5-45 所 示 。 


园 单 击 “确定 ” 按钮， 插入 表格 ， 此 表格 记 为 | 


表格 1， 如 图 5-46 所 示 。 


使 用 表格 轻松 排 州 网 外 数据 


[mm > 


亡 画 
图 5-45 “表格 ”对 话 框 


图 5-46 插入 表格 1 


园 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 输 入 相 
应 的 文字 ， 如 图 5-47 所 示 。 


图 5-47 输入 文字 
加 将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 执 行 


“插入 ”|“ 表 格 ” 表 格 命令 ， 插 入 表格 ， 
此 表格 记 为 表格 2， 如 图 5-48 所 示 。 

园 选中 插入 的 表格 2， 打 开 属性 面板 ， 在 表格 
的 属性 面板 中 设置 表格 的 相关 属性 ， 如 图 
5-49 所 示 。 
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图 5-48 ”插入 表格 2 


MT BW A SM 0 0 i OW me 


在 表格 2 的 


图 5-49 设置 表格 的 属性 


如 图 5-50 所 示 。 


园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 | 


如 图 5-43 所 示 。 


转 5.5.2 


果 如 


“局 
ED 


hE 元 格 中 分 别 输入 相应 的 文字 ， 


图 5-50 输入 文字 


表格 - 


a 
中 来 。 下 面 通过 实例 讲述 创建 加 角 表 格 ， 效 
图 $-51 所 示 ， 具 体操 作 步 又 如 下 。 | 


实 成 2 一 一 创建 国 角 


| 国 打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 如 图 


| [DW ze mh 画面 l=15L x 


图 5-51 创建 国 角 表 格 效果 
原始 文件 : 原始 文件 /CH05/ 实 战 2/index.html 
最 终 文件 : 最 终 文 件 /CH05/ 实 战 2/index1.html 


5-52 所 示 。 


[CT 
[LE 


天 打开 网 页 文档 
四 执行 “插入 ”|“ 表 格 ” 命 令 ， 弹 出 “ 表 
格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ”设置 
为 3，“ 列 数 ”设置 为 1，“ 表 格 宽度 ” 设 
置 为 744 像 素 ， 如 图 5-53 所 示 。 


图 5-53 “表格 ”对 话 框 


@ 。。 第 5 章 FFE 
国 单 击 “ 确 定 ”按钮 ， 插 入 表格 ， 此 表格 记 为 表格 1， 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 如 图 
5-54 所 示 。 
园 执行 “插入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 相 
应 的 圆 角 图 像 文 件 images/img25.git， 如 图 $-55 所 示 。 


二 DCTISTz 


图 5-54 插入 表格 1 图 5-55 “选择 图 像 浙 文件 ”对 话 杠 
园 单 击 “ 确 定 ”按钮 ， 插 入 圆 角 图 像 ， 如 图 5-56 所 示 。 


园 将 光标 置 于 表格 1 的 第 2 行 中 ， 打 开 代 码 视图 ， 在 代码 中 输入 背景 图 像 代 码 “background=images/ 
img27.gif”， 如 图 5-57 所 示 。 
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图 5-56 插入 圆 角 图 像 
返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 5-58 所 示 。 
国 将 光标 置 于 背景 图 像 上 ， 插 入 2 行 1 列 的 表格 ， 此 表格 记 为 表格 2， 如 图 5-59 所 示 。 
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图 5-58 插入 背景 图 像 图 5-59 插入 表格 2 
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园 将 光标 置 于 表格 2 的 第 1 行 单元 格 中 ， 执行“ 插入 ”| “图像 ”| “图 像 ” 命 令 ， 插 入 图 像 images/ 
jianjiejpg， 如 图 5$-60 所 示 。 

园 将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 5-61 所 示 。 
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图 5-60 插入 图 像 | | 图 5-61 二 入 文字 

将 光标 置 于 表格 1 的 第 3 行 单元 格 中 ， 执 行 “插入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 插 入 圆 角 图 像 
images/img26.gif， 如 图 $-62 所 示 。 

园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 5-51 所 示 。 
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本 有 60 和 个 明博 ， 茜 自 寺 祁 、 天 卫 村 人 训 、 负 部、 中 二 涯 及 丫头 4 本 礼让 全 ， memes 


图 5-62 插入 圆 角 图 像 


课 后 练习 o 


| 理 功能 ， 包 括 和 


二 、 操 作 题 
1. 给 图 $-63 所 示 的 网 页 导入 表格 式 数据 


一 、 填 空 题 

1. 表格 和 3 部 分 
组 成 。 ”贯穿 表格 的 左右 ，_ 则 是 上 
下 方式 的 ， 是 输入 信息 的 地 方 。 效果 ， 如 图 5-64 所 示 。 

2. 为 了 更 加 快速 而 有 效 地 处 理 网 页 中 的 表 原始 文件 : 原始 文件 /CH05/ 操 作 题 lindex html 
格 和 内 容 ，Dreamweaver CC 提供 了 多 种 自动 处 | 最 终 文 件 : 最终 文 件 /CH05/ 操 作 题 1/index1 html 
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图 5-66 “ 入 开 ”对 话 框 
: 2. 创建 图 5-67 所 示 的 圆 角 表格 效果 ， 如 
| 图 5-68 所 示 。 
: 原始 文件 : 原始 文件 /CH05/ 操 作 题 2/index html 


图 5-63 原始 文件 


最 终 文件 : 最终 文 件 /CH05/ 操 作 题 2/index1.html 


调味 如 有 际 公 司 


末 丙 于 二 二 导 册 三 
全 本 | 要 本 。 | 未 二 
祖山 和 未 费 相 科 | 
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图 5-64 ” 细 线 表格 效果 : 

将 光标 置 于 要 导入 表格 式 数据 的 位 置 ， 执 行 | 
“文件 ” |“ 导入 ”|“ 表 格式 数据 ”命令 ， | 
弹出 “导入 表格 式 数据 ”对 话 框 ， 如 图 5-65 | 
所 示 。 | 
SA DN Fe 


= | 调味 加 有 限 公 司 


图 5-67 原始 文件 


数据 文件 EE- 
定 界 符 : [Tab- S 
表格 宽度 : 加 匹配 内 容 
设置 为: | 百分比 


单元 格 边 距 : 3 格式 化 首 行 : [ [无 格式 ] -| 
单元 格 间距 2 边框 1 


图 5-65 “导入 表格 式 数据 ”对 话 框 : 

加 在 对 话 框 中 单 击 “ 数 据 文件 ”文本 框 右边 的 | 
“浏览 ”按钮 ， 弹 出 “打开 ”对 话 框 ， 在 ; 

对 话 框 中 选择 文件 ， 如 图 5-66 所 示 。 
国 单 击 “ 打 开 ” 按 钮 ， 即 可 将 文件 添加 到 “ 导 
入 表格 式 数据 ”对 话 框 ， 单 击 “ 确 定 ” 按 ; 
钮 ， 导 入 表格 式 数据 。 | 图 5-68 创建 国 角 表 格 效果 


yo 
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表格 在 网 页 设计 中 的 地 位 非常 重要 ， 可 以 说 如 果 表 格 使 用 不 好 的 话 ， 
就 不 可 能 设计 出 出 色 的 网 页 。Dreamweaver 提 供 的 表格 工具 ， 不 但 可 以 实现 一 般 功 能 的 数据 组 
织 ， 还 可 以 用 于 定位 网 页 中 的 各 种 元 素 和 设计 规划 页 面 的 布局 。 本 章 主要 学 习 了 表格 的 基本 知 
识 和 操作 ， 最 后 的 几 个 综合 实例 ， 通 过 一 步 一 步 详 细 的 讲解 ， 让 读者 可 以 学 习 到 如 何 利用 表格 
来 进行 网 页 的 排版 布局 ， 并 且 还 会 了 解 一 些 表格 的 高 级 应 用 和 制作 时 的 注意 事项 等 。 
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第 6 章 
使 用 模板 、 库 和 插 
件 提高 网 页 制作 效率 


本 章 导读 
本 章 主要 学 习 如 何 提高 网 页 的 制作 效 
率 ， 这 就 是 “模板 ”、“ 库 ”和 “插件 ”。 
它们 不 是 网 页 设计 师 在 设计 网 页 时 必须 要 使 
用 的 技术 ， 但 是 如 果 合 理 地 使 用 它们 将 会 大 
大 提高 工作 效率 。 合 理 地 使 用 模板 和 库 也 是 
创建 整个 网 站 的 重 中 之 重 。 


技术 要 点 
熟悉 创建 模板 
掌握 应 用 模板 创建 网 页 
掌握 创建 和 应 用 库 
掌握 Dreamweaver 的 插 


件 扩展 功能 


ETEEIETEE 识 党 实录 “ee _®@ 
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0. | 


够 大 幅度 提高 效率 ， 
的 页 面 制作 。 
上 6.1.1 课堂 练 一 


在 Dreamweaver 中 ， 


模板 。 一 种 是 将 现 有 的 网 页 文件 另存 为 模板 ， 


然后 要 据 需 要 再 进行 修改 ， 另 外 一 种 是 直接 新 | 
建 一 个 空白 模板 ， 再 在 其 中 插入 需要 显示 的 文 | 


档 内 容 。 
原始 文件 : 原始 文件 /CH06/6.1/index.html 


最 终 文件 : 最终 文 件 /CH06/6.1/Templates/ | 


moban.dwt 


如 下 。 


国 打开 网 页 文档 执行 “文件 ”| “另存 为 模 | 


二 > 如 ds 
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从 现 有 文档 中 创建 模板 的 具体 操作 步 又 | 
| 国 单 击 “ 保 存 ” 按 钮 ， 


图 6-1 打开 网 页 文档 


园 弹出 “另存 模板 ”对 话 框 ， 在 对 话 框 中 的 | 
“站 点 ”下 拉 列表 中 选择 “6.1.1”， 


卜 6.1.2 课堂 练 一 


“i 


练 一 一 创建 可 编辑 区 域 


创建 模板 - 


在 网 页 制作 中 很 多 劳动 是 重复 的 ， 如 页 面 的 项 部 和 
都 一 样 ， 而 同一 栏目 中 除了 某 一 块 区 域外 ， 版 式 、 内 容 
而 Dreamweaver 中 的 模板 就 可 以 解决 这 一 问题 ， 模 板 主 要 用 于 同一 栏目 中 


底部 在 很 多 页 面 中 
完全 一 样 。 如 果 将 这 些 工作 简化 ， 就 能 


练 一 一 从 现 有 文档 创建 模板 


有 两 种 方法 可 以 创建 | 


存 为 ”文本 框 中 输入 “moban”， 如 图 6-2 
所 示 。 


与 下 要 到 


Bi =3 
让 上 [EL 
观 存 的 模板 : | 股 有 模板 ) 


“另存 模板 ”对 话 框 
弹出 Adobe 
Dreamweaver CC 提示 对 话 框 ， 如 图 6-3 所 
示 ， 单 击 “ 是 ”按钮 ， 即 可 将 现 有 文档 另 
存 为 模板 。 


图 6-2 


图 6-3 ”Adobe Dreamweaver ee 
提示 


“1 不 要 随意 移动 模板 到 Templates 文 件 天 之 外 ， 上 
;上 吕 者 将 任何 非 模板 文件 放 在 Templates 文 件 央 中 。 上 


;上 1 此外， 不 要 将 Templates 文 件 央 移动 到 本 地 根 文 件 
1 关 之 外 ， 以 免 引 用 模板 时 路 径 出 错 。 I 


可 编辑 区 域 就 是 基于 模板 文档 的 未 锁定 区 域 ， 是 网 页 套用 模板 后 ， 可 以 编辑 的 区 域 。 在 创 
建 模板 后 ， 模 板 的 布局 就 固定 了 ， 如 果 要 在 模板 中 针对 某 些 内 容 进行 修改 ， 即 可 为 该 内 容 创 建 


可 编辑 区 。 创 建 可 编辑 区 域 的 具体 操作 步骤 如 下 。 


团 打开 网 页 文档 ， 如 图 6-4 所 示 。 


园 将 光标 置 于 要 创建 可 编辑 区 域 的 位 置 ， 执 行 “ 插 入 ”|“ 模 板 对 象 ”|“ 可 编辑 区 域 ” 


“新 建 可 编辑 区 域 ” 对 话 框 ， 如 图 6-5 所 示 。 
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此 区 域 格 可 以 在 基于 该 模板 的 文档 
中 进行 编辑 。 


图 6-4 打开 文档 图 6-5 “新 建 可 编辑 区 域 ”对 话 框 
园 单 击 “ 确 定 ” 按 钮 ， 创 建 可 编辑 区 域 ， 如 图 6-6 所 示 。 
Nm 枚 “有 -用 | 虽 


1 作为 一 个 模板 ,上 


| ~ 1 会 自动 锁定 文档 上 
、 J . Dreamweaver 到 

| 西湖 龙井 ww NE 上 中 的 大 部 分 区 域 。 模 板 设计 者 上 

Pe | I el 

， 1 些 区 域 是 可 编辑 的 ， 创 建 模板 上 


1 时 ， 可 编辑 区 域 和 锁定 区 域 都 
上 可 以 更 改 。 但 是 ， 在 基于 模板 上 
上 1 的 文档 中 ， 模 板 用 户 只 能 在 可 上 
上 编辑 区 域 中 进行 修改 ， 到 于 锁 上 
1 定 区 域 则 无 法 进行 任何 操作 。 上 


Bn em。 em。 mm em mm mm ee mm 串 


1 模板 中 除了 可 以 插入 最 常用 的 “可 编辑 区 域 ”外 ， 还 可 以 插入 一 些 其 他 类 型 的 区 域 ， 它 们 分 别 为 ; | 
上 “可 选区 域 ”、“ 重 复 区 域 ”、“ 可 编辑 的 可 选区 域 ”和 “重复 表格 ”。 

1 文 ep pe es ee 
1 使 用 可 选区 域 ， 可 以 显示 和 隐藏 特别 标记 的 区 域 ， 在 这 些 区 域 中 用 户 将 无 法 编辑 内 容 。 I 
I 交 “重复 区 域 ” 是 可 以 根据 需要 在 基于 模板 的 页 面 中 复制 任意 次 数 的 模板 区 域 。 使 用 重复 区 域 ， 可 以 通 | 
1 过 重复 特定 项 目 来 控制 页 面 布局 ， 如 目录 项 、 说 明 布 局 或 者 重复 数据 行 。 重复 区 域 本身 不 是 可 编辑 区 上 
中 域 ， 要 使 重复 区 域 中 的 内 容 可 编辑 ， 请 在 重复 区 域内 插入 可 编辑 区 域 。 | 
上 六 “可 编辑 的 可 选区 域 ”是 可 选区 域 的 一 种 ， 模 板 可 以 设置 显示 或 隐藏 所 选区 域 ， 并 且 可 以 编辑 该 区 域 


图 6-6 创建 可 编辑 区 域 


上 中 的 内 容 ， 该 可 编辑 的 区 域 是 由 条 件 语 自控 制 的 。 Il 
上 太 “重复 表格 ”是 重复 区 域 的 一 种 ， 使 用 重复 表格 可 以 创建 包含 重复 行 的 表格 格式 的 可 编辑 区 域 ， 可 以 用 
I 定义 表格 属性 并 设置 哪些 表格 单元 格 可 编辑 。 1 


» 应 用 模板 创建 网 页 5 


模板 实际 上 也 是 一 种 文档 ， 它 的 扩展 名 为 .dwt， 存 放 在 根 目 录 下 的 
Templates 文 件 夹 中 ， 如 果 该 Templates 文 件 夹 在 站 点 中 尚 不 存在 ，Dreamweaver 将 在 保存 新 建 模 
板 时 自动 将 其 创建 。 模 板 创建 好 之 后 ， 就 可 以 应 用 模板 快速 、 高 效 地 设计 风格 一 致 的 网 页 ， 下 
面 通过 图 6-7 所 示 的 效果 讲述 应 用 模板 创建 网 页 ， 具 体操 作 步 骤 如 下 。 
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一 原始 文件 : 原始 文件 /CH06/6.2/Templates/ 


moban.dwt 
最 终 文件 : 最 终 文 件 /CH06/6.2/indexl html 


在 创建 模板 时 ， 可 编辑 区 和 锁定 区 域 都 可 以 用 
进行 修改 。 但 是 ， 在 利用 模板 创建 的 网 页 中 ， 只 用 
能 在 可 编辑 区 中 进行 更 改 ， 而 无 法 修改 绩 定 区 域 | 
2 
园 执行 “文件 ”| “新建” 命令 ， 弹 出 “新 建 

文档 ”对 话 框 ， 在 对 话 框 中 选择 “网 站 模 

板 ”|“6.2”| “moban” 选 项 ， 如 图 6-8 所 示 。 
| 回 单 击 “ 创 建 ”按钮 ， 利 用 模板 创建 网 页 ， 如 
图 6-9 所 示 。 


Dw ze Ses sew RAD We wo oO wats BIW Wo 


西湖 龙井 sis 


他 当 ， 理 红叶 全 有些 三 险 _ 醒 人 回味- 
日 有 “二 而 于 品 十 是 上 号” ， 是 直 可 和 


图 6-8 。 “新 建文 档 ”对 话 杠 图 6-9 利用 模板 创建 网 页 

将 光标 置 于 要 可 编辑 区 域 中 ， 执 行 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 
将 “ 行 数 ”设置 为 2，“ 列 ”设置 为 1， “表格 宽 度 ” 设 置 为 100%， 如 图 6-10 所 示 。 

回 单 击 “ 确 定 ”按钮 ， 插 入 表格 ， 如 图 6-11 所 示 。 
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单元 格 间距 : 0 公告、 香 可 、 味 里 、 形 闫 井 区 必 梧 ， 而 人 回味 - 
让 二 就 有 “ 昌 前 是 玉 品 ,两 和 是 上 避 ” ,是 下 可 多 得 的 好 和 ! 


CC 本 _ [CJ] C 台 J 
图 6-10 “表格 ”对 话 框 图 6-11 插入 表 ; 


园 将 光标 置 于 表格 的 第 1 行 单元 格 中 ， 执 行 “插入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 弹 出 “选择 图 像 源 
文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文件 guanyujpg， 如 图 6-12 所 示 。 
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使 用 模板 、 库 插件 近 口 网 外 制作 效率 


国 单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 6-13 所 示 。 
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所 二 5 六, 耐 全 亲 - 


图 6-12 “选择 图 像 源 文件 ”对 话 框 
将 光标 置 于 表格 的 第 2 行 单元 格 中 ， 执 行 
所 示 。 


“插入 ”| “表格 ”命令 ， 


图 6-13 ”插入 图 像 
插入 1 行 1 列 的 表格 ， 如 图 6-14 


国 将 光标 置 于 刚 插入 表格 的 单元 格 中 ， 输入 相应 的 文字 ， 如 图 6-15 所 示 。 
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el 
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0、 帮凶 中 晶 类 、 百 罗阳 的 ， 型 人 Ek 
Mim “Wm, HR , RT! 


图 6-14 插入 表格 
国 将 光标 置 于 文字 中 ， 执行“ 插入 ”| “ 
所 示 。 


四 选中 插入 的 图 像 ， 单 击 鼠 标 右键 ， 
6-17 所 示 。 


图 像 ” 


在 弹出 的 


Se ey Sn WM 画 5 


龙 关 En 
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图 6-15 输入 文字 
“图 像 ”命令 ， 插 入 图 像 images/cha.jjpg， 如 图 6-16 


下 拉 菜 单 中 选择 “对 齐 ”|“ 右 对 齐 ” 命 令 ， 如 图 
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图 6-16 插入 图 像 


-17 设置 对 齐 方 式 


图 6-17 


ET 识 堂 实录 。。 一 全 


执行 “文件 ” |“ 保存 ”命令 ， 
名 称 ， 如 图 6-18 所 示 。 


弹出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”文本 框 中 输入 


园 单 击 “ 保 存 ” 按钮 ， 保 存 文档 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 效果 如 图 6-7 所 示 。 


EEE 


潮 计 ] 
we 一 


Ea DATA 人 


ENY: indexl heml 
RST: | A Documents Chem ham".shtm sheml;".xheml sume.sst"js;"json” appcache;" ml; zsh"xsc v | 
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图 6-18 “另存 为 ”对 话 框 


将 模板 应 用 到 已 有 的 网 页 


创建 了 模板 以 后 


0.3 


应 用 到 现 有 页 面 等 。 
国 6.3.1 


将 模板 应 用 到 已 有 的 网 
页 ， 效 果 如 图 6-19 所 示 ， 具 
体操 作 步 骤 如 下 。 

原始 文件 : 原始 
CHO06/6.3.1/index.html 

最 终 文 件 : 最 终 文 件 / 


， 还 要 知道 怎么 


西湖 龙井 asi 


色 远 、 秋 可、 站 日 、 形 美 。 看 及 有 隐 ， 耐 人 回 时 


双 文 件 / 


自古 就 有 "寺前 有 过 局 ,两 凋 坚 上 局 ” , 是 二 可 多 了 的 9 茶 


EN ee = 


及 删除 模板 


去 管理 模板 ， 例 如 删除 模板 、 把 模板 


课堂 练 一 下 


CH06/6.3.Uindexl.html ee 
国 打开 网 页 文档 ， 如 图 6-20 ee 
所 示 。 em 


园 执行 “修改 ”|“ 模 
板 ”|“ 应 用 模板 到 页 ” 
命令 ， 弹 出 “选择 模板 ” 
对 话 框 ， 在 对 话 框 的 “站 
点 ”下 拉 列 表 中 选择 
“6.3.1”，“ 模 板 ” 列 表 
框 中 选择 “moban”， 如 


3 
CT 
.Mesa Hd 4 S131, en 
SR 
,REE NE 
A 人 天 共鸣 和 
x 


RT 
Tn he ER EP 
Base Fe 
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sas 


图 6-21 所 示 。 
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图 6-19 ”将 模板 应 用 到 已 有 的 网 页 效果 


@ oo 第 6 章 


[LE 


EE 3 


PE 国 OETISTE 


上 


3 


图 6-20 打开 文档 


SET 


站 点 6); 区 3 了 
模板 上 


辐 当 梳 二 时 更 新 页面) 


图 6-21 


“选择 模板 ”对 话 框 | 
园 单 击 “ 选 定 ”按钮 ， 弹 出 “不 一 致 的 区 域 | 
名 称 ” 对 话 框 ， 在 对 话 框 中 进行 相应 的 设 | 


置 ， 如 图 6-22 所 示 。 


不 -区 二 2 聊 Eo 
此 档 呈 此 区 二 在 站 析 中 有 相交 区 二 。 
| 
日 可 编辑 区 域 
oement body Blitheiond 
RE 了 在 作 何方 | 
a m F 
局 MWB 物 i 区 域 | 球 让 三 向 好 广 习 几 于 H 册 
E77 [本 [本 
| 
| 
图 6-22 “不 一 致 的 区 域名 称 ” 对 话 框 


回 单 击 “ 确 定 ”按钮 ， 将 模板 应 用 到 已 有 的 网 ; 


页 ， 如 图 6-23 所 示 。 


[7 


an 
EE 


6 湖 龙 井 ass 


理 可 、 味 全 开关， 百 可 的 弄 人 时 
| “本 RE 品 ,再 了 全 上品” . 是 下 可 多 得 3 了 5 素 


图 6-23 应 用 模板 


使 用 模板 、 库 和 插件 近 高 网 外 制作 效率 


打开 已 有 的 网 页 ， 在 “资源 ”面板 中 选中 一 上 


I== | | 目 个 模板 ， 然 后 将 其 拖 动 到 文档 窗口 中 ， 或 者 单 击 上 
全 -| | 1 直下 衣 的 “应 用 ”按钮 ， 是 可 将 模板 应 用 到 已 有 | 


上 1 的 网 页 。 


将 模板 应 用 到 网 页 后 ， 如 果 对 其 结果 不 满 有 


| 总， 执行 “编辑 ”| “撤销 ”命令 ， 将 网 页 恢复 到 原 上 
1 未 的 样子 。 | 


,I6.3.2 删除 模板 一 一 


| 最 如 下 。 


将 站 点 中 不 用 的 模板 删除 的 具体 操作 步 


| 回 在 “资源 ”面板 中 选中 要 删除 的 模板 文件 。 


单 击 “资源 ”面板 右 下 角 的 “删除 ”按钮 ， 


或 单 击 鼠标 右键 ， 在 弹出 的 菜单 中 选择 
“删除 ”命令 ， 如 图 6-24 所 示 。 


Er 


重建 站 点 列表 


新 建 模板 (W) 

从 楼 析 新 建 [) 
编 编 (E) 

坊 缠 天 文件 (0) 
应 用 (A) 

从 源 交 件 要 新 (U) 


重信 名 (M) 
更 新 当 前 具 U 


图 6-24 选择 “删除 ”命令 


，| 国 选择 选项 后 ， 弹 出 图 6-25 所 示 的 Adobe 


Dreamweaver CC 提示 对 话 框 ， 提 示 是 否 要 
删除 文件 。 
Dreamweaver i 


@ 人 确认 要 测 除 moban'3? 


图 6-25 Adobe Dreamweaver CC 提示 对 话 框 


| 因 单 击 “是 ”按钮 ， 即 可 将 模板 从 站 点 中 删除 。 
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6. 4 创建 和 应 用 库 


库 是 一 种 特殊 的 Dreamweaver 文 件 ， 其 中 包含 已 创建 以 便 放 在 网 页 上 的 
单独 的 “资源 ”或 “资源 ”副本 的 集合 ， 库 里 的 这 些 资源 被 称 为 库 项 目 。 库 项 目 是 可 以 在 多 个 页 
面 中 重复 使 用 的 存储 页 面 的 对 象 元 素 ， 每 当 更 改革 个 库 项 目的 内 容 时 ， 都 可 以 同时 更 新 所 有 使 用 
了 该 项 目的 页 面 。 不 难 发 现 ， 在 更 新 这 一 点 上 ， 模 板 和 库 都 是 为 了 提高 工作 效率 而 存在 的 。 


用 6.4.1 课堂 练 一 练 一 一 将 现 有 内 容 创建 为 库 


在 库 中 ， 读 者 可 以 存储 各 种 各 样 的 页 面 | 医 
元 素 ， 如 图 像 、 表 格 、 声 音 和 Flash 影 片 等 。 
将 现 有 内 容 创建 库 的 具体 操作 步骤 如 下 。 


原始 文件 : 原始 文件 /CH06/6.4.1/index.html 
最 终 文件 : 最 终 文件 /CH06/6.4.1/top.lbi 


团 打开 网 页 文档 ， 执 行 “文件 ”|“ 另 存 为 ” 
命令 ， 如 图 6-26 所 示 。 


可 ms 
图 6-27 “另存 为 ”对 话 框 


| 国 单 击 “ 保 存 ”按钮 ， 即 可 将 文件 保存 为 库 广 
| 作 有 


《tc- 区 < 
一 | DELICIRIR 导 


停 下 


时 


。 


国 6- 26 ”打开 文档 


园 弹出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 | 
“保存 类 型 ”下 拉 列 表 中 选择 “ “ 库 文件 | 
(CIbi) ”选项 ， 在 “文件 名 ”文本 框 中 输 | 
入 “top.lbi”， 如 图 6-27 所 示 。 | 量 


图 6-28 保存 为 库 文 件 


轩 6.4.2 课堂 练 一 练 一 一 在 网 页 中 应 用 库 

库 是 一 种 存放 整个 站 点 中 重复 使 用 或 频繁 更 新 的 页 面 元 素 〈 如 图 像 、 文 本 和 其 他 对 象 ) 的 
文件 ， 这 些 元 素 被 称 为 库 项 目 。 如 果 使 用 了 库 ， 就 可 以 通过 改动 库 更 新 所 有 采用 库 的 网 页 ， 不 
个 一 个 地 修改 网 页 元 素 或 重新 制作 网 页 。 下 面 在 图 6-29 所 示 的 网 页 中 应 用 库 效果 ， 具 体操 
作 步 骤 如 下 。 


原始 文件 : 原始 文件 /CH06/6.4.2/index.html 
最 终 文件 : 最 终 文件 /CH06/6.4.2/indexl html 


制作 效率 


图 6-31 显示 库 项 目 


| 固 将 光标 置 于 要 插入 库 的 位 置 ， 选 中 top， 单 击 
| 左下 角 的 “插入 ”按钮 ， 插 入 库 项 目 ， 如 图 


6-32 所 示 。 


! DW zmn mdr BBW Wm oi Wo So WA WD 


图 6-29 在 网 页 中 应 用 库 效 果 
国 打开 网 页 文档 ， 执 行 “ 窗 口 ”| “资源 ” 命 
令 ， 如 图 6-30 所 示 。 


0 0 an BN 


图 6-32 插入 库 项 目 


| 上。 如果 项 望 仅仅 派 加 库 项 目 内 容 对 应 的 代码 ， 上 
| 上 而 不 希望 它 作为 库 项 目 出 现 ， 则 可 以 按 住 Ctrl 键 ,上 
| 目 再 将 相应 的 库 项 目 从 “资源 ”面板 中 拖 到 文档 窗 上 


图 6-30 ”打开 网 页 文档 1 I 
园 打开 “资源 ”面板 ， 在 面板 中 单 击 “ 库 ” 按 | 口 。 这 样 桂 入 的 内 容 就 以 普通 文档 的 形式 出 现 。 


: mw wn 
钮 QI， 显 示 库 项 目 ， 如 图 6-31 所 示 。 


| 国 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 
O © 5 


插件 是 Dreamweaver 中 最 迷人 的 地 方 。 正 如 使 月 


有 


图 像 处 理 软件 一 样 ， 可 


如 图 6-29 所 示 。 
利用 滤 镜 特效 让 


图 像 的 处 理 效果 更 神奇 ， 又 如 玩 游戏 ， 可 利用 俗称 的 外 挂 软件 ， 让 游戏 玩 起 来 更 


Dreamweaver 的 插件 扩展 功能 
简单 。 所 以 在 Dreamweaverd 


使 用 插件 ， 将 使 网 页 制作 更 轻松 ， 功 能 更 强大 ， 效 果 更 绚丽 。 


旧 6.5.1 Dreamweaver 插件 简介 


插件 也 叫 扩展 ， 插 件 管理 器 是 开放 的 应 用 程序 接口 ， 开 发 人 员 可 以 通过 HTML 和 JavaScript 
对 其 进行 扩展 。 


DIEEIDETEE 识 尝 实录 “e®@ 


Dreamweaver 的 真正 特殊 之 处 在 于 它 强 大 的 无 限 扩 展 性 。Dreamweaver 中 的 插件 可 用 于 扩展 
Dreamweaver 的 功能 。Dreamweaver 中 的 插件 主要 有 3 种 : Command 命 令 、Object 对 象 、Behavior 
行为 。 在 Dreamweaver 中 插件 的 扩展 名 为 .mxp。 开 发 Dreamweaver 的 Adobe 公 司 专门 在 网 站 上 
辟 了 Adobe Extension Manager， 为 用 户 提 供 交 流 自己 插件 的 场所 。 


虽 6.5.2 课堂 练 一 练 _ 安装 插件 


安装 插件 的 具体 操作 步骤 如 下 。 | 。， 钮 ， 继 续 安装 插件 ， 如 图 6-35 所 示 。 如 果 已 
国 执行 “开始 ”| “所 有 程序 "| “Adobe” | “Adobe ;经 安装 了 另 一 个 版 本 〈 较 旧 或 较 新 ， 甚 至 

Extension Manager CS6” 命 令 ， 打 开 “Adobe : 相同 版 本 ) 的 插件 ， 扩 展 管理 器 会 询问 是 

Extension Manager CS6” 对 话 框 ， 如 图 633 所 示 。 ; 。。 否 蔡 换 已 安装 的 插件 ， 单 击 “ 是 ”按钮 ， 
园 单 击 “ 安 装 新 扩展 ”按钮 g， 打 开 “ 选 ;将 蔡 换 已 安装 的 插件 。 

取 要 安装 的 扩展 ”对 话 框 ， 如 图 6-34 所 | SEE 


示 。 在 对 话 框 中 选取 要 安装 的 扩展 包 文件 | 
Cm) 或 者 插件 信息 文件 (-mxi) ， 单 击 ; 
“打开 ”按钮 ， 也 可 以 直接 双击 扩展 包 文 ; 


之 出 人 NF 


件 ， 自 动 启动 扩展 管理 器 进行 安装 。 


图 6-35 “安装 声明 ”对 话 框 


上 执行 “命令 ”| “扩展 管理 ”命令 ， 打 开 上 
I “Adobe Extension Manager CS6” 对 话 框 。 I 


: 园 打开 “提示 ”对 话 框 ， 单 击 “ 安 装 ”按钮 ， 


; ! 图 6-36 所 示 。 
图 6-33 “Adobe Extension Manager CS6” 对 话 框 | 如 所 示 
! Fy RE FF] beboee 
的 扩展 
查找 范围 中 :| 四 插件 站 @ 生 已 国 - 
9 
我 最 近 的 文档 
村 
J 
桌面 
op 
我 的 文档 
我 的 电脑 
@ 
和 
网 上 邻居 
文件 类 型 @): |* zxp:t ma > 取消 ] 


图 6-36 提示 对 话 框 


图 6-34 “选取 要 安装 的 扩展 ”对 话 框 : 因 提示 插件 安装 成 功 ， 即 可 完成 插件 的 安 3 
a ee 提示 安装 ， 即 可 完 9 安装 ， 
国 打开 “安装 声明 ”对 话 框 ， 单 击 “ 接 受 ” 按 | “如 图 6.37 所 示 。 
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| 一 


是 通常， 安装 新 的 插件 部 将 改变 Dreamweaver 
”上 1 的 莱 单 系统 ， 即 会 对 menu.xml 文 件 进行 修改 。 在 | 
: 1 安装 时 ， 扩展 管理 器 会 为 menus.xml 文 件 创建 一 | 
”个 meuns.xbk 的 备份 。 这 样 如 果 meuns.xml 文 件 再 上 
i 上 被 一 个 插件 意外 地 破坏 ， 就 可 以 用 meuns.xbk 普 换 
”meuns xml， 将 菜单 系统 恢复 为 先前 的 状态 。 。 上 


图 6-37 插件 安装 成 功 


实战 应 用 


@ 在 网 页 中 使 用 模板 可 以 统一 整个 站 点 的 页 面 风格 ， 使 用 库 项 目 可 以 对 
页 面 的 局 部 统一 风格 ， 在 制作 网 页 时 使 用 库 和 模板 可 以 节省 大 量 的 工作 时 间 ， 并 且 对 日 后 的 升 
级 带 来 很 大 的 方便 。 下 面 通过 实例 讲述 模板 的 创建 和 应 用 ， 并 且 通 过 实例 讲述 插件 的 应 用 。 


用 6.6.1 实战 1 一 一 创建 企业 网 站 模板 


创建 企业 网 站 模板 的 效果 如 图 6-38 所 | 让 ee 
示 ， 具 体操 作 步 骤 如 下 。 : 
最 终 文件 : 最 终 文件 /CH06/ 实 ea dwt 


re 


届 saaws 


国 ma 


图 6-39 “新 建文 档 ” 对 话 框 


CET ! EZ 


一 | SE 
图 6-38 企业 网 站 模板 效果 : = 
! LT 
国 执行 “文件 ”| “新建 ”命令 ,弹出 “新 | 
建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “ 空 模 : 
板 ”| “HTML 模 板 ”| “无” 选项， 如 图 ; 
6-39 所 示 。 | 
园 单 击 “ 创 建 ”按钮 ， 创 建 一 个 空白 文档 网 | 
页 ， 如 图 6-40 所 示 。 = 和 守 
图 6-40 新 建文 档 
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执行 “文件 ” |“ 保存 ”命令 ， 弹 出 Adobe Dreamweaver CC 提示 对 话 框 ， 如 图 6-41 所 示 。 
园 单 击 “ 确 定 ” 按 钮 ， 弹 出 “另存 模板 ”对 话 框 ， 在 对 话 框 的 “另存 为 ”文本 框 中 输入 名 称 ， 如 
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图 6-42 所 示 。 
2 -| 
_ 站 点 [mm | 
Eee 现存 的 模板 有 可 
此 模板 不 含有 任何 可 编辑 区 域 。 您 想 继续 中? 
全 
加 不 有 车 告 我 。D) | 三 
| CD CR | NR | 
图 6-41 提示 对 话 框 图 6-42 “另存 模板 ”对 话 框 


园 将 光标 置 于 页 面 中 ,执行 
将 “上 边 距 ”、“ 下 边 距 ”、 


“左边 距 


话 框 中 将 “ 行 数 ”设置 为 3，“ 列 ” 设 


置 为 1， 


“修改 ”| “页面 属 性 ”命令 ， 弹 出 “页 面 属性 ”对 话 框 ， 在 对 话 框 中 


”、“ 右 边 距 ”分 别 设置 为 0%， 如 图 6-43 所 示 。 
国 单 击 “ 确 定 ” 按 钮 ， 修 改 页 面 属性 ， 执 行 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 在 对 


二 


ss) 
出 字 洒 P)， 避 于 认 字 体 ~ 
大 小 6) 四 
文本 声色); 加 | 
家): 四 | 
珍本 图 入) 
重复 吕 ) 习 


右 动 距 吧 ) 0 
下 边 距 m) 0 


左边 扣 b :0 


Ee 


上 边 距 四): 0 


ss ss es | 


Ca 


“表格 宽度 ”设置 为 997 像 素 ， 如 图 6-44 所 示 。 
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图 6-43 “ 页 面 属性 ” 对 话 框 


图 6-44 表格 对 话 框 
园 单 击 “ 确 定 ”按钮 ， 插 入 表格 ， 此 表格 记 为 表格 1， 如 图 6-45 所 示 。 
园 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 执 行 “ 插 入 ”| “图像 ”| “图像 ”命令 ， 弹 出 “选择 图 像 源 

文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文件 ./images/topjpg， 如 图 6-46 所 示 。 
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图 6-45 插入 表格 1 


园 单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 6- 
将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 执 行 


记 为 表格 2， 如 图 6-48 所 示 。 


图 6-46 
47 所 示 。 


“选择 图 像 源 文 件 " 对 话 框 


“插入 ”| “表格 ”命令 ， 插 入 1 行 2 列 的 表格 ， 此 表格 


@ 。—™ 第 6 章 


使 用 模板 、 库 和 插件 提高 网 外 制作 效 闪 
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图 6-47 插入 图 像 
园 将 光标 置 于 表格 2 的 第 1 列 单元 格 中 ， 执 行 “插入 ”|“ 表 格 ” 命 令 ， 插 入 2 行 1 列 的 表格 ， 此 表格 


记 为 表格 3， 如 图 6-49 所 示 。 


图 6-48 插入 表格 2 


将 光标 置 于 表格 3 的 第 1 行 单 元 格 中 ， 执 行 “插入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 插 入 图 像 .images/ 


channel 1.gif， 如 图 6-50 所 示 。 
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图 6-49 插入 表格 3 


纺织 有 限 公司 
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图 6-50 插入 图 像 
将 光标 置 于 表格 3 的 第 2 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 插 入 4 行 1 列 的 表格 ， 此 表格 
记 为 表格 4， 如 图 6-51 所 示 。 


加 将 光标 置 于 表格 4 的 第 1 行 单元 格 中 ， 打 开 代码 视图 ， 在 代码 中 输入 背景 图 像 代码 
“height="30"background=../images/menusmall.gif”， 如 图 6-52 所 示 。 
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图 6-51 插入 表格 4 


图 6-52 输入 代码 


返回 设计 视图 ， 可 以 看 到 插入 的 背景 图 像 ， 如 图 6-53 所 示 。 
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EDT 讲堂 六 录 “ee _®@ 
将 光标 置 于 背景 图 像 上 ， 输 入 相应 的 文字 ， 如 图 6-54 所 示 。 
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图 6- 


同步 骤 14-16， 
将 光标 置 于 表 
“新 建 可 编辑 


53 输入 背景 图 像 图 6-54 输入 文字 
在 表格 4 的 其 他 单元 格 中 输入 相应 的 内 容 ， 如 图 6-55 所 示 。 
格 2 的 第 2 列 单元 格 中 ， 执 行 “插入 ”|“ 模 板 对 象 ”|“ 可 编辑 区 域 ”命令 ， 弹 出 


i - 


区 域 ”对 话 框 ， 在 “名 称 ” 本 桥 申 樟 从 圳 称 ， 如 图 6-56 所 示 。 


田 单 击 “确定 ” 


图 6-55 输入 内 容 图 6-56 新建 可 编辑 区 域 ” 对 话 框 
按钮 ， 插 入 可 编辑 区 域 ， 如 图 6-57 所 示 。 


园 将 光标 置 于 表格 1 的 第 3 行 单元 格 中 ， 执 行 “插入 ”| “图像 ”| “图 像 ”命令 ， 插 入 图 像 /images/ 
dibujpg， 如 图 6-58 所 示 。 
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图 6- 
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57 插入 可 编辑 区 域 图 6-58 插入 图 像 
国 保存 文档 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 效 果 如 图 6-38 所 示 。 


@_。 第 意 BENNY Te 


人 目 6.6.2 ”实战 2 一 一 利用 模板 创建 网 页 0 
利用 模板 创建 网 页 的 效果 A 

如 图 6-59 所 示 ， 具 体操 作 步 又 i 

如 下 。 
原始 文件 : 原始 文件 /CH06/ 实 战 

2/moban.dwt 
最 终 文件 : 最终 文件 /CH06/ 实 战 

2/indexl.html a 

国 执行 “文件 ”| “新建 ” 命 ee re 
令 ， 弹 出 “新 建文 档 ” 对 话 a pr 
框 ， 在 对 话 框 中 选择 “ 模 re 
板 中 的 页 名 | “« 站 是 实 战 EN 


RE tee, Sa ISR, GE 


2” | “moban” 选 项 ， 如 图 5 EL TE 3S WE 


RAS, RH, ,FR 


6-60 所 示 。 mm medieg, 


单 击 “ 创 建 ”按钮 ， 利 用 模板 ER 到 _ 
创建 文档 ， 如 图 6-61 所 示 。 图 6-59 利用 模板 创建 网 页 效果 


NEE 


[hoo | [A CE 0 : 有 ed 
图 6-60 “新 建文 档 ” 对 话 框 图 6-61 利用 模板 创建 文档 
执行 “文件 ”| “保存” 命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”文本 框 中 输入 
名 称 ， 如 图 6-62 所 示 。 单 击 “保存 ”按钮 ， 保 存 文档 。 
园 将 光标 置 于 可 编辑 区 域 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 弹 出 “表格 ”对 话 框 ， 将 “ 行 数 ” 设 
置 为 1，“ 列 ”设置 为 2， 如 图 6-63 所 示 。 
TE 
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图 6-62 “另存 为 ”对 话 框 图 6-63 “表格 ”对 话 框 
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园 单 击 “确定 ”按钮 ， 插 入 表格 ， 此 表格 记 为 表格 1， 如 图 6-64 所 示 。 
国 将 光标 置 于 表格 1 的 第 1 列 单元 格 中 ， 打 开 代码 视图 ， 输 入 背景 图 像 代码 “background-imagesbg gif”， 
如 图 665 所 示 。 


图 6-64 插入 表 1 图 6-65 输入 代码 
返回 设计 视图 可 以 看 到 插入 的 背景 图 像 ， 如 图 6-66 所 示 。 
园 将 光标 置 于 表格 1 的 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 插 入 3 行 1 列 的 表格 ， 此 表格 
记 为 表格 2， 如 图 6-67 所 示 。 
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图 6-66 插入 背景 图 像 图 6-67 插入 表格 2 

国 将 光标 置 于 表格 2 的 第 1 行 单元 格 中 ， 将 单元 格 的 “背景 颜色 ”设置 为 “本 FF8E1”， 并 在 单元 格 中 
输入 相应 的 文字 ， 如 图 6-68 所 示 。 

将 光标 置 于 表格 2 的 第 2 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 图 像 ”| “图像 ”命令 ， 插 入 图 像 1mages/ 
info_small 2.gif， 如 图 6-69 所 示 。 
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图 6-68 输入 文字 图 6-69 插入 图 像 
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辆 将 光标 置 于 表格 2 的 第 3 行 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 插 入 1 行 1 列 的 表格 ， 此 表格 
记 为 表格 3， 如 图 6-70 所 示 。 
固 将 光标 置 于 表格 3 的 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 6-71 所 示 。 
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四， 二 关中 和 二 多 族 、 交 六 小生 入 和 -| 


乓 和 后 有 天 得 有 限 公司 


图 6-70 插入 表格 3 图 6-71 输入 文字 
将 光标 置 于 文字 中 ， 执 行 “ 插 入 ”|“ 图 像 ”| “图 像 ”命令 ， 插 入 图 像 images/index_csjpg， 如 
图 6-72 所 示 。 
加 保存 文档 ， 完成 利用 模板 创建 网 页 文档 的 制作 ， 效果 如 图 6-59 所 示 。 
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图 6-72 插入 图 像 


侦 6.6.3 ”实战 3 一 一 使 用 插件 制作 背景 音乐 网 页 一 一 一 一 一 一 0 


带 背 景 音乐 的 网 页 可 以 增加 吸引 力 ， 不 
但 可 以 使 用 行为 和 代码 提示 实现 ， 利 用 插件 
也 可 以 实现 。 下 面 通过 实例 讲述 使 用 插件 制 
作 背 景 音乐 的 网 页 效果 ， 如 图 6-73 所 示 ， 具 体 
操作 步骤 如 下 。 
原始 文件 : 原始 文件 /CH06/ 实 战 3/index.html 
最 终 文件 : 最 终 文件 /CH06/ 实 战 3/index1.html 


图 6-73 背景 音乐 网 页 效果 


团 执行 “开始 ” |“ 所 有 程序 ”| “Adobe”| “Adobe Extension Manager CS6” 命 令 ， 打 开 “Adobe Extension 
Manager CS6” 对 话 框 ， 根 据 提示 安装 插件 ， 如 图 6-74 所 示 。 
园 打开 网 页 文档 ， 如 图 6-75 所 示 。 
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图 6-74 安装 插件 图 6-75 ”打开 网 页 文档 
园 单 击 “ 常 用 ”插入 栏 中 按钮 二 ， 弹 出 Sound 对 话 框 ， 在 对 话 框 中 单 击 于 ws] 按钮 ， 弹 出 “选择 
文件 ”对 话 框 ， 在 对 话 框 中 选择 一 个 声音 文件 ， 如 图 6-76 所 示 。 
加 单 击 “ 确 定 ” 按 钮 ， 将 文件 添加 到 文本 框 中 ， 如 图 6-77 所 示 。 
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图 6-76 “选择 文件 ”对 话 框 图 6-77 “Sound” 对 话 框 
园 单 击 “ 确 定 ” 按 钮 ， 添 加 声音 ， 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 6-73 所 示 。 


旧 6.6.4 ”实战 4 一 一 利用 插件 制作 不 同时 段 显 示 不 同 问 候 语 


下 面 通过 实例 讲述 利用 插件 制作 不 同时 
段 显 示 不 同 问候 语 效果 ， 如 图 6-78 所 示 ， 具 体 
操作 步骤 如 下 。 
原始 文件 : 原始 文件 /CH06/ 实 战 4/index.html 
最 终 文件 : 最终 文 件 /CH06/ 实 战 4/index1.html 
国 执行 “开始 "| “所 有 程序 "| “Adobe” | “Adobe 
Extension Manager CS6” 命 令 ， 打开 “Adobe 
Extension ManagerCS6” 对 话 框 ， 根 据 一 步 步 提 
示 ， 安 装 插件 ， 如 图 6-79 所 示 。 

园 打开 网 页 文档 ， 将 “常用 ”插入 栏 切 换 到 CN 
JInsert Greeting 插 入 栏 ， 单 击 CN Insert Greeting 
插入 栏 中 的 mu 按钮， 如 图 6-80 所 示 。 


图 6-78 不 同时 段 显 示 不 同 问候 语 效果 


98 


@_。。 第 意 EY 


0 


图 6-79 ”安装 插件 图 6-80 ”打开 文档 
园 弹出 CN Insert Greeting 对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 6-81 所 示 。 
园 单 击 “ 确 定 ” 按 钮 ， 弹 出 Dreamweaver 提 示 对 话 框 ， 如 图 6-82 所 示 。 


CN Insert Greeting x 
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图 6-81 CN Insert Greeting 对 话 框 图 6-82 ”提示 对 话 框 
园 单 击 “确定 ”按钮 。 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 6-78 所 示 。 


1 。 Dreamweaver 重新 启动 前 不 可 访问 ， 可 能 会 提示 退出 然后 重新 启动 该 应 用 程序 。 1 
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一 、 填 空 题 

1. 模板 实际 上 也 是 一 种 文档 ， 它 的 扩展 名 为 ， 存 放 在 根 目录 下 的 文件 
夹 中 。 

2. 是 一 种 特殊 的 Dreamweaver 文 件 ， 其 中 包含 已 创建 以 便 放 在 网 页 上 的 单独 的 
“资源 ”或 “资源 ”副本 的 集合 ， 库 里 的 这 些 资源 被 称 为 。 
二 、 操 作 题 


1. 创建 图 6-83 所 示 的 模板 效果 。 
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提示 


原始 文件 : 原始 文件 /CH06/ 操 作 题 2/index.html 
最 终 文件 :最终 文件 /CH06/ 操 作 题 2/index1.html 
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图 6-84 原始 文件 


图 6-83 模板 效果 
2. 利用 插件 给 图 6-84 所 示 的 网 页 添加 不 


和 


同时 段 显示 不 同 问候 语 效果 ， 如 图 6-85 所 示 。 六 
[| a a, rs nave an, 
上 参考 实战 4 一 一 利用 持 件 制作 不 同时 息 显 示 不 we 
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图 6-85 不 同时 段 显 示 不 同 问 候 语 效果 


@ 本 章 学 习 了 Dreamweaver 用 于 提高 网 站 工作 效率 的 强大 工具 一 一 模 
板 、 库 和 插件 。 模 板 和 库 有 相似 的 功能 ， 有 了 它们 就 能 够 实现 网 页 风格 的 统一 、 内 容 快速 更 新 
等 。 另 外 书 中 最 后 通过 几 个 实例 中 介绍 了 另外 一 种 提高 网 页 制作 效率 的 工具 一 一 扩展 插件 ， 这 
里 只 是 起 到 一 种 抛砖引玉 的 参考 作用 ， 读 者 在 实际 的 制作 时 并 不 一 定 要 使 用 它们 ， 如 果 需 要 更 
多 的 扩展 插件 ， 可 以 登录 Adobe 的 官方 网 站 或 第 三 方 扩展 插件 支持 网 页 来 进行 查找 和 下 载 。 
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本 章 导 读 
CSS+DIV 布 局 的 最 终 目 的 是 搭建 完善 的 页 
面 架构 ， 通 过 新 的 符号 Web 标 准 的 构建 形成 来 
提高 网 站 设计 的 效率 、 可 用 性 及 其 他 实质 性 的 优 
势 ， 全 站 的 CSS 应 用 就 成 为 了 CSS 布 局 应 用 的 一 
个 关键 环节 。 


技术 要 点 
熟悉 CSS 样 式 表 
掌握 设置 CSS 样 式 表 属性 
掌握 链接 到 或 导出 外 部 CSS 
样式 表 
掌握 CSS 和 DIV 布局 
掌握 CSS 布 局 方法 
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/ | 了 解 CSS 样 式 表 S 


CSS (Cascading Style Sheet， 层 三 样式 表 ) 是 一 种 制作 网 页 必 不 可 少 
的 技术 之 一 ， 现 在 已 经 为 大 多 数 的 浏览 器 所 支持 。 实 际 上 ，CSS 是 一 系列 格式 规格 或 样式 的 集 
合 ， 主 要 用 于 控制 页 面 的 外 观 ， 是 目前 网 页 设计 中 的 常用 技术 与 手段 。 

CSS 具 有 强大 的 页 面 美化 功能 。 通 过 CSS， 可 以 控制 许多 仅 使 用 HTML 标 记 无 法 控制 的 属 
性 ， 并 能 轻而易举 地 实现 各 种 特效 。 

CSS 的 每 一 个 样式 表 都 是 由 相对 应 的 样式 规则 组 成 的 ， 使 用 HTML 中 的 <style> 标 签 可 以 将 
样式 规则 加 入 到 HTML 中 。<style> 标 签 位 于 HTML 的 head 部 分 ， 其 中 也 包含 网 页 的 样式 规则 。 
可 以 看 出 ，CSS 的 语句 是 可 以 内 府 在 HTML 文 档 内 的 。 所 以 ， 编 写 CSS 的 方法 和 编写 HTML 的 方 
法 是 一 样 的 ， 代 码 如 下 。 


CSS 还 具有 便利 的 自动 更 新 功能 。 在 更 新 CSS 样 式 时 ， 所 有 使 用 该 样式 的 页 面 元 素 的 格式 
都 会 自动 更 新 为 当前 所 设 定 的 新 样式 。 


7 p ) 设置 CSS 样 式 表 属性 : 
© 控制 网 页 元 素 外 观 的 CSS 样 式 用 来 定义 字体 、 颜 色 、 边 距 和 字 间 距 等 


属性 ， 可 以 使 用 Dreamweaver 来 对 所 有 的 CSS 属 性 进行 设置 。CSS 属 性 被 分 为 9 大 类 : 类 型 、 背 

景 、 区 块 、 方 框 、 边 框 、 列 表 、 定 位 、 扩 展 和 过 渡 ， 下 面 分 别 进行 介绍 。 

加?7.2.1 设置 类 型 属性 
在 CSS 样 式 定义 对 话 框 左 侧 的 “分 类 ”列表 框 中 选择 “类 型 ”选项 ， 在 右 侧 可 以 设置 CSS 

样式 的 类 型 参数 ， 如 图 7-1 所 示 。 
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图 7-1 选择 “类 型 ”选项 
在 “类 型 ”中 的 各 选项 参数 如 下 。 


字体 。 

Font-size: 定义 文本 大 小 。 
小 ， 也 可 以 选择 相对 大 小 。 
Font-style: 将 “正常 ”、 


人 正常 » 


人 性 7.2.2 设置 背景 属性 - 

使 用 “CSS 规 则 定义 ”对 话 框 的 “背景 ” 
类 别 可 以 定义 CSS 样 式 的 半 
页 中 的 任何 元 素 应 用 在 


景 属性 。 如 图 7-2 所 示 。 


图 7-2 选择 “背景 ”选项 | 
在 CSS 的 “背景 ”选项 中 可 以 设置 以 下 | 


参数 。 
六 ”Background-color: 设置 元 素 的 背景 颜色 。 
太 Background-image: 设置 元 素 的 背景 


像 。 可 以 直接 输入 图 像 的 路 径 和 文件 ， 也 | 


有 7.2.3 ”设置 区 块 属性 


Font-family， 用 于 设置 当前 样式 所 使 用 的 


可 以 通过 选 | 
择 数字 和 度量 单位 来 选择 文本 的 特定 大 | 


“斜体 "或 | 
生生 


景 设置 。 可 以 对 网 | 


Line-height: 设置 文本 所 在 行 的 高 度 。 
该 设置 传统 上 称 为 “前 导 ”。 选 择 “ 正 
常 ” 自 动 计算 字体 大 小 的 行 高 ， 或 输入 
一 个 确切 的 值 ， 并 选择 一 种 度量 单位 。 
Text-decoration: 向 文本 中 添加 下 划 线 、 
上 划 线 或 删除 线 ， 或 使 文本 闪烁 。 正 常 
文本 的 默认 设置 是 “无 ”。“ 链 接 ”的 
默认 设置 是 “下 划 线 ”。 将 “链接 ” 设 
置 为 “无 ”时 ， 可 以 通过 定义 一 个 特殊 
的 类 删除 链接 中 的 下 划 线 。 

Font-weight: 对 字体 应 用 特定 或 相对 的 粗 体 
量 。“ 正 常 ” 等 于 400，“ 粗 体 ” 等 于 700。 
Font-variant: 设置 文本 的 小 型 大 写字 母 变 
量 。Dreamweaver 不 在 文档 窗口 中 显示 该 
属性 。 

Text-transform: 将 选 定 内 容 中 的 每 个 单 
词 的 首 字 母 大 写 或 将 文本 设置 为 全 部 大 
写 或 小 写 。 

Color: 设置 文本 颜色 。 


可 以 单 击 
Background-Repeat: 


“浏览 ”按钮 选择 图 像 文件 。 
确定 是 否 及 如 何 重 
复 背 景 图 像 。 包 含 4 个 选项 : “不 重复 ” 
指 在 元 素 开 始 处 显示 一 次 图 像 ，“ 重 
复 ” 指 在 元 素 的 后 面 水 平和 垂直 平 铺 图 
像 ，“ 横 向 重复 ”和 “纵向 重复 ”分 别 
显示 图 像 的 水 平 带 区 和 垂直 带 区 。 图 像 
被 剪辑 以 适合 元 素 的 边界 。 
Background-attachment: 确定 背景 图 像 
是 固定 在 它 的 原始 位 置 还 是 随 内 容 一 起 
滚动 。 
Background-position (X) 和 Background- 
position (Y): 指定 背景 图 像 相对 于 元 素 的 
初始 位 置 ， 这 可 以 用 于 将 背景 图 像 与 页 
面 中 心 垂 直 和 水 平 对 齐 。 如 果 附 件 属性 
为 “固定 ”， 则 位 置 相 对 于 文档 窗口 而 
不 是 元 素 。 


使 用 “CSS 规则 定义 ”对 话 框 的 “区 块 ” 类 另 


可 以 定义 标签 和 属性 的 间距 和 对 齐 设置 ， 对 话 框 中 


103 


课堂 实录 “ee 一 全 
左 侧 的 “分 类 ”列表 中 选择 “区 块 ”选项 ， 在 右 | 


侧 可 以 设置 相应 的 CSS 样 式 ， 如 图 73 所 示 。 


Cm |] [ERW | 


图 7-3 选择 “区 块 ” 选 项 
在 CSS 的 “区 块 ” 各 选项 中 参数 如 下 。 


友 Word-spacing: 设置 单词 的 间距 ， 若 要 
设置 特定 的 值 ， 在 下 拉 列 表 框 中 选择 | 
“ 值 ”， 然 后 输入 一 个 数值 ， 在 第 二 个 ; 


下 拉 列 表 框 中 选择 度量 单位 。 


六 Letter-spacing: 增加 或 减 小 字母 或 字符 的 | 
间距 。 若 要 减 小 字符 间距 ， 指 定 一 个 负 | 


肯 7.2.4 设置 方 框 属性 
使 用 “CSS 规 则 定义 ”对 话 框 的 “ 方 框 ” 


类 别 可 以 为 用 于 控制 元 素 在 页 面 上 的 放置 方 
式 的 标签 和 属性 定义 设置 。 可 以 在 应 用 填充 


和 边 距 设置 时 将 设置 应 用 于 元 素 的 各 个 边 ， 


应 用 于 元 素 的 所 有 边 。 


图 7-4 所 示 。 


body 的 CSS 规则 定义 


图 7-4 选择 “ 方 框 ”选项 
在 CSS 的 “ 方 框 ”各 选项 中 参数 如 下 。 
太 ”Width 和 Height: 设置 元 素 的 宽度 和 高 度 。 
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也 可 以 使 用 “全 部 相同 ”设置 将 相同 的 设置 | 


Css 的 “ 方 框 ”类 别 可 以 为 控制 元 素 在 页 ， 
面 上 的 放置 方式 的 标签 和 属性 定义 设置 , 如 ; 


值 ， 字 母 间距 设置 覆盖 对 齐 的 文本 设置 。 

Vertical-align: 指定 应 用 它 的 元 素 的 垂直 
对 齐 方式 。 仅 当 应 用 于 <img> 标 签 时 ， 

Dreamweaver 才 在 文档 窗口 中 显示 该 属性 。 

Text-align: 设置 元 素 中 的 文本 对 齐 方式 。 

Text-indent: 指定 第 一 行文 本 缩 进 的 程 
度 。 可 以 使 用 负 值 创建 凸 出 ， 但 显示 取 
决 于 浏览 器 。 仅 当 标 签 应 用 于 块 级 元 素 
时 ，Dreamweaver 才 在 文档 窗口 中 显示 该 
属性 。 

White-space: 确定 如 何 处 理 元 素 中 的 空 
白 。 从 下 面 3 个 选项 中 选择 : “正常 ” 
指 收缩 空白 ; “保留 ”的 处 理 方式 与 文 
本 被 包括 在 <pre> 标 签 中 一 样 〈 即 保留 所 
有 空白 ， 包 括 空格 、 制 表 符 和 回 车 ) ; 

“不 换行 ”指定 仅 当 遇 到 <br> 标 签 时 文 
本 才 换 行 。Dreamweaver 不 在 文档 窗口 中 
显示 该 属性 。 

Display: 指定 是 否 及 如 何 显示 元 素 。 


Float: 设置 其 他 元 素 在 哪个 边 围绕 元 素 
浮动 。 其 他 元 素 按 通 常 的 方式 环绕 在 浮 
动 元 素 的 周围 。 

Clear: 定义 不 允许 AP Div 的 边 。 如 果 清 
除 边 上 出 现 AP Div， 则 带 清除 设置 的 元 素 
将 移 到 该 AP Div 的 下 方 。 

Padding: 指定 元 素 内 容 与 元 素 边框 (如 
果 没 有 边框 ， 则 为 边 距 ) 之 间 的 间距 。 
取消 选择 “全 部 相同 ”选项 可 设置 元 素 
各 个 边 的 填充 ; “全 部 相同 ”选项 将 相 
同 的 填充 属性 应 用 于 元 素 的 Top、Right、 
Bottom 和 Left 侧 。 

Margin: 指定 一 个 元 素 的 边框 (如 果 没 
有 边框 ， 则 为 填充 〉 与 另 一 个 元 素 之 间 
的 间距 。 仅 当 应 用 于 块 级 元 素 〈 段 落 、 
标题 和 列表 等 ) 时 ，Dreamweaver 才 在 文 
档 窗口 中 显示 该 属性 。 取 消 选择 “全 部 
相同 ”选项 可 设置 元 素 各 个 边 的 边 距 ; 
“全 部 相同 ”将 相同 的 边 距 属性 应 用 于 
元 素 的 Top、Right、Bottom 和 Left 侧 。 
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CSS 的 “边框 ”类 别 可 以 定义 元 素 周 围 边 : 文档 窗口 中 将 所 有 样式 呈现 为 实 线 。 取 


框 的 设置 ， 如 图 7-5 所 示 。 | 消 选择 “全 部 相同 ”选项 可 设置 元 素 各 
i ”个 边 的 边框 样式 ，“ 全 部 相同 ”选项 将 
相同 的 边框 样式 属性 应 用 于 元 素 的 Top、 

| Right、Bottom 和 Left 侧 。 
| 太 Width: 设置 元 素 边 框 的 粗细 。 取 消 选 
: 择 “ 全 部 相同 ”选项 可 设置 元 素 各 个 边 
的 边框 宽度 ; “全 部 相同 ”选项 将 相同 
的 边框 宽度 应 用 于 元 素 的 Top、Right、 


: Bottom 和 Left 侧 。 
Ce; Color: 设置 边框 的 颜色 。 可 以 分 别 设置 每 
图 7-5 选择 “边框 ”选项 : 个 边 的 颜色 。 取 消 选 择 “ 全 部 相同 ”选项 
在 CSS 的 “边框 ”各 选项 中 参数 如 下 。 可 设置 元 素 各 个 边 的 边框 颜色 ; “全 部 相 
太 Style: 设置 边框 的 样式 外 观 。 样 式 的 显 同 ” 选 项 将 相同 的 边框 颜色 应 用 于 元 素 的 
示 方式 取决 于 浏览 器 。Dreamweaver 在 | Top、Right、Bottom 和 Left 侧 。 
月 7.2.6 ”设置 列表 属性 
CSS 的 “列表 ”类 别 为 列表 标签 定义 列表 | 在 CSS 的 “列表 ”各 选项 中 参数 如 下 。 
设置 ， 如 图 7-6 所 示 。 :大 List-style-type: 设置 项 目 符号 或 编号 的 
[scanes | 外观. 
四 四 ，。 | 友 List-style-image: 可 以 为 项 目 符号 指定 
一 Ge | | 。 自 定义 图 像 。 单 击 “ 浏 览 ” 按 钮 选择 图 


= 


| | 像 ， 或 输入 图 像 的 路 径 。 

| | 六 List-style-Position: 设置 列表 项 文本 是 否 
| 换行 和 缩 进 〈 外 部 ) ， 以 及 文本 是 否 换 

| | | 行 到 左边 距 〈 内 部 ) 。 
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图 7-6 选择 “列表 ”选项 


虽 7.2.7 设置 定位 属性 


CSS 的 “定位 ”样式 属性 使 用 “ 层 ” 首 选 body 的 Css 十 义 和 有 
参数 中 定义 层 的 默认 标签 ， 将 标签 或 所 选 文 乱 一 一 一 望 
本 块 更 改 为 新 层 ， 如 图 7-7 所 示 。 i | 
在 CSS 的 “定位 ”选项 中 各 参数 如 下 。 四 | ier: 3 st | 
友 ”Position: 在 CSS 布 局 中 ，Position 发 挥 着 | 人 | | 
非常 重要 的 作用 ， 很 多 容器 的 定位 是 用 = mn | 
Position 来 完成 。Position 属 性 有 4 个 可 选 
值 ， 它 们 分 别 是 static、absolute、fixed 和 
relative。 ET CD Re 
“absolute”: 能 够 很 准确 地 将 元 素 移动 图 7-7 选择 “定位 ”选项 
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到 你 想 要 的 位 置 ， 绝 对 定位 元 素 的 位 置 。 | 改变 指针 图 像 。 
“fxed”: 相对 于 窗口 的 固定 定位 。 | 友 Filter: 对 样式 所 控制 的 对 象 应 用 特殊 
“relative”: 相对 定位 是 相对 于 元 素 默 ; 
认 的 位 置 的 定位 。 
“static”: 该 属性 值 是 所 有 元 素 定位 的 ; 
默认 情况 ， 在 一 般 情 况 下 ， 我 们 不 需要 特别 | 
地 去 声明 它 ， 但 有 时 候 遇 到 继承 的 情况 ， 我 ; 
们 不 愿意 见 到 元 素 所 继承 的 属性 影响 本 身 ， | 
因而 可 以 用 position:static 取 消 继承 ， 即 还 原 元 | 
素 定位 的 默认 值 。 : 
六 Visibility， 如果 不 指定 可 见 性 属性 ， 则 默 ， 
认 情 况 下 大 多 数 浏览 器 都 继承 父 级 的 值 。 - 
六 ”Placement: 指定 AP Div 的 位 置 和 大 小 。 : 轩 98， 法 痢 中 扩展 尼 汪 
太 Clip 定义 AP Div 的 可 见 部 分 。 如 果 指 ; 办 7.2.9 ”设置 过 渡 样 式 
定 了 剪辑 区 域 ， 本 以 通过 脚本 语言 访问 : “过 渡 ” 样 式 可 以 将 元 素 从 一 种 样式 或 
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它 ， 并 操作 属性 以 创建 像 所 除 这 样 的 特 | 状态 更 改 为 另 一 种 样式 或 状态 。 “过渡” 样 
殊 效 果 。 通 过 使 有 改变 属性 ”行为 可 i 式 属性 如 图 7-9 所 示 。 


以 设置 这 些 擦 除 效果 。 | 
并 7.2.8 ”设置 扩展 属性 | | 
! 因 日 
“扩展 ”样式 属性 包含 两 部 分 ， 如 图 7-8 |， nami | 
所 示 。 : i | 
六 ”Page-break-before: 这 个 属性 的 作用 是 为 ; | 
打印 的 页 面 设置 分 页 符 。 : 
六 ”Page-break-after: 检索 或 设置 对 象 后 出 现 | 
的 页 分 市 符 。 
太 ”Cursor: 指针 位 于 样式 所 控制 的 对 象 上 时 ; 图 7-9 选择 “过 小 ”选项 
链接 到 或 导出 外 部 CSS 样 式 表 o 
@ 链接 外 部 样式 表 可 以 方便 地 管理 整个 网 站 中 的 网 页 风格 ， 它 让 网 页 的 


文字 内 容 与 版 面 设计 分 开 ， 只 要 在 一 个 CSS 文 档 中 定义 好 网 页 的 外 观 风 格 ， 所 有 链接 到 此 CSS 
文档 的 网 页 ， 便 会 按照 定义 好 的 风格 显示 。 


用 7.3.1 课堂 练 一 练 一 一 创建 内 部 样式 表 

内 部 样式 表 只 包含 在 当前 操作 的 网 页 文档 中 ， 并 只 应 用 于 相应 的 网 页 文档 ， 因 此 ， 在 制作 
背景 网 页 的 过 程 中 ， 可 以 随时 创建 内 部 样式 表 ， 创 建 CSS 内 部 样式 表 的 具体 操作 步骤 如 下 。 
国 执行 “窗口 ” |“CSS 样 式 ” 命 令 ， 打 开 “CSS 样 式 ” 面 板 ， 如 图 7-10 所 示 。 
园 在 “CSS 样 式 ” 面板 中 单 击 “ 新 建 ”按钮 回 ， 如 图 7-11 所 示 。 
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| 名 新 建 在 网 页 内 部 ， 可 以 选择 “ 仅 限 该 文档 ” 

| 选项 。 如 果 在 “选择 器 类 型 ”下 拉 列 表 中 选择 

; “复合 内 容 ” 选 项 ， 则 要 在 “选择 器 名 称 ”下 

; 拉 列 表 中 选择 一 种 选择 器 名 称 ， 也 可 以 直接 输 

| 入 一 种 选择 器 名 称 ， 如 图 7-14 所 示 。 


村 建 C55 规则 


"boay” 的 尾 性 -boay” 的 寿险 
EC 可 石 灾 日 癌 守 扩 i 二 图 2 日 自 


图 7-10 “CSS 样 式 ” 面 板 图 7-11 单 击 “ 新 建 ”按钮 | 

在 “CSS 样 式 ”面板 的 底部 排列 有 几 个 按 : 
钮 ， 含 义 如 下 所 述 。 : 
附加 样式 表 圆 ， 在 HTMIL 文 档 中 链接 一 ; 


个 外 部 的 CSS 文 件 。 | 新 建 C55 本 
新 建 CSS 样 式 回 | : 编辑 新 的 CSS 样 式 | cs Re 


文件 。 

编辑 样式 表 区 ， 编辑 原 有 的 CSS 规 则 。 | 
删除 CSS 样 式 国 :删除 选中 的 已 有 的 | 
CSS 规 则 。 | 
弹出 “新 建 CSS 规 则 ”对 话 框 ， 如 图 7-12 | 

所 示 。 | pe 
《 妈 限 该 文档 》 


新 建 C55 规则 上 

选择 加 并 型- | 

为 Css 规则 光 近 上 下 文科 吕 类 型 | 图 7-14 在 “选择 器 类 型 ”中 选择 “复合 内 容 ” 选 项 
| 类 ( 可 应 用 于 任何 INL 元 索 ) | 

| 园 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ” 

PE | ”选项 ， 然 后 在 “选择 器 名 称 ” 中 输入 
| | “style”。 由 于 创建 的 是 CSS 样 式 内 部 样式 

表 ， 所 以 在 “规则 定义 ”下 拉 列 表 中 选择 

“ 仅 限 该 文档 ”选项 ， 如 图 7-15 所 示 。 


C55 规则 


规则 定义 : 
选择 定义 规则 的 位 置 。 


| 侵 限 该 文档 ) 


图 7-12 “新 建 CSS 规 则 ”对 话 框 : 

在 对 话 框 中 ， 如 果 在 “选择 器 类 型 ” 下拉 
列表 中 选择 “标签 ”选项 ， 则 在 “选择 器 名 称 ” 
下 方 的 下 拉 列 表 中 可 以 选择 一 个 HIMIL 标 签 , 也 ; 
可 以 直接 输入 这 个 标签 ， 如 图 7-13 所 示 。 : 
“规则 定义 ”下 拉 列 表 框 用 来 设置 新 建 | 

的 CSS 语 句 的 位 置 。CSS 样 式 按照 使 用 方法 可 ; 
以 分 为 内 部 样式 和 外 部 样式 。 如 果 想 把 CSS 语 ; 图 7-15 选择 “类 ”选项 并 输入 选择 器 名 称 
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园 单 击 “ 确 定 ”按钮 ， 弹 出 “style 的 CSS 规 则 i 国 单 击 “ 确 定 ” 按 钮 ， 在 “CSS 样式 ”面板 中 可 
定义 ”对 话 框 ， 在 对 话 框 中 将 “Font-family” | 以 看 到 新 建 的 样式 表 和 属性 ， 如 图 7-17 所 示 。 
设置 为 宋体 ，“Font-size” 设 置 为 12 像 素 ， | 
“Line-height” 设 置 为 150%，“Color” 设 置 | 
为 “#000000”， 如 图 7-16 所 示 。 | 


打击 


nl 
到 国 加 


口 wink@@) 
Dane 
| Cw] CC 要 DR] [两 Ww | ! Een 地 日 日 加 
图 7-16 “.style 的 CSS 规 则 定义 ”对 话 框 | 图 7-17 新 建 的 内 部 样式 表 


肯 7.3.2 课堂 练 一 等 一 创建 外 部 样式 家 
外 部 样式 表 是 一 个 独立 的 样式 表 文 件 ， 保 | ] 
存在 本 地 站 点 中 ， 外 部 样式 表 不 仅 可 以 应 用 在 | | 
当前 的 文档 中 ， 还 可 以 根据 需要 应 用 在 其 他 的 i 
网 页 文档 中 ， 甚 至 在 整个 站 点 中 应 用 。 
创建 外 部 CSS 样 式 表 的 具体 操作 步骤 如 下 。 | 
国 执行 “窗口 " | “css 样式 "命令, 打开 “CSS | 
样式 ”面板 。 在 “CSS 样 式 ” 面 板 中 单 击 “ 新 : 
建 CSS 规 则 ”按钮 到 ， 如 图 7-18 所 示 。 : 


图 7-19 “新 建 CSS 规 则 ”对 话 框 
9 单 击 “ 确 定 ”按钮 ， 弹 出 图 7-20 所 示 的 “将 
样式 表 文件 另存 为 ”对 话 框 ， 在 “文件 名 ” 
文本 框 中 输入 样式 表 文件 的 名 称 ， 并 在 “ 相 
对 于 ”下 拉 列 表 中 选择 “文档 ”选项 。 


将 样式 表 文件 另存 为 


0 TEA 村 Wicnte aa 


图 7-18 “CSS 样式” 面板 | 
园 弹出 “新 建 CSS 规 则 ”对 话 框 ， 在 对 话 框 ; 
中 的 “选择 器 类 型 ”下 拉 列 表 中 选择 “ 标 | 
签 ”选项 ， 在 “选择 器 名 称 ” 下 拉 列表 中 
选择 “body” 选 项 ，“ 规 则 定义 ”设置 为 ; | 
“新 建 样式 表 文 件 ”， 如 图 7-19 所 示 。 : 图 7-20 “将 样式 表 文件 另存 为 ”对 话 框 
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园 单 击 “保存 ”按钮 ， 弹 出 图 7-21 所 示 的 对 话 | 园 单 击 “确定 ”按钮 ， 在 文档 窗口 中 可 以 看 到 
框 ， 在 对 话 框 中 进行 相应 的 设置 。 : 新 建 的 外 部 样式 表 文 件 ， 如 图 7-22 所 示 。 


区 


body 的 CSS 规则 定义 (在 body. css 中 ) 


0 BE A er i 3 Ei 


ar Em 了 


四 司 rreastom 四 
[rert-decoration D): onderline W) carc) :leo 
overline DO) 


图 7-21 “body 的 CSS 规 则 定义 ”对 话 框 | 图 7-22 ”新建 的 外 部 样式 表 文件 
上 7.3.3 ”课堂 练 一 练 一 一 链接 外 部 样式 表 
编辑 外 部 CSS 样 式 表 时 ， 链 接 到 该 CSS 样 | AAA 


式 表 的 所 有 文档 将 会 全 部 更 新 ， 以 反映 所 做 | ne 
的 修改 。 用 户 可 以 导出 文档 中 包含 的 CSS 样 式 | 
以 创建 新 的 CSS 样 式 表 ， 然 后 附加 或 链接 到 外 | 
部 样式 表 以 应 用 那里 所 包含 的 样式 。 链 接 外 | 
部 样式 表 的 效果 如 图 7-23 所 示 ， 具 体 的 操作 步 | 
又 如 下 。 | 

原始 文件 : 原始 文件 /CH07/7.3.3/index.html 

最 终 文件 最终 文件 /CH07/7.3.3/index1.html 


图 7-24 打开 网 页 文档 


! 夯 wm 区 Ls 
| mo mw me Wo me en Ma wr 和 


er 


图 7-23 ”链接 外 部 样式 表 的 效果 


打开 网 页 文档 ， 执 行 “ 窗 口 ”| “CSS 样 式 ” 
命令 ， 如 图 7-24 所 示 。 


图 7-25 执行 “附加 样式 表 ” 命 令 


园 打开 “Css 样式 ” 面板 ， 在 面板 中 单 击 鼠 标 | | 因 强 出 “链接 外 部 样式 表 ” 对 话 框 ， 在 该 对 话 
右键 ， 在 弹出 的 快捷 菜单 中 执行 in 框 中 单 击 “ 文 件 /URL” 下 拉 列 表 框 右 侧 的 


式 表 ” 命 令 ， 如 图 7-25 所 示 。 | “浏览 ”按钮 ， 如 图 7-26 所 示 。 
加 弹出 “选择 样式 表 文 件 ” 对 话 框 ， 在 对 话 
| 框 中 选择 “images” 文 件 夹 中 的 “common. 
css” 文 件 ， 如 图 7-27 所 示 。 


ETITEEIETEE 识 党 实录 “ee®@ 
链接 外 部 样式 表 同 |; 中 可 以 看 到 链接 到 的 外 部 样式 表 ， 如 


文件 /VRLD: : 7-29 所 示 。 
添加 为: GO 链接 0) | 
口 导入 加 ) 


[出 


链接 外 部 样式 表 


所 体 旭 


您 也 可 以 往 入 到 号 分 隔 的 电 件 类 型 列 表 。 


Jresawesver 的 范例 样式 表 可 以 帮助 你 起步 。 


图 7-27 “选择 样式 表 文件 ”对 话 框 : 
园 单 击 “确定 ”按钮 ， 将 文件 添加 到 对 话 框 ; 有 全 
中 ， 在 “添加 为 ” 栏 选中 “链接 ” 单 选 | 图 7-29 链接 外 部 样式 表 


二 | 国 保存 网 页 ， 按 F12 键 在 浏览 嚣 中 预览 ， 如 图 
国 单 击 “ 确 定 " 按钮 ， 在 “CSS 样式 ”面板 | 7.23 所 示 


7 /4 T= 


许多 的 Web 站 点 都 使 用 基于 表格 的 布局 显示 页 面 信息 。 表 格 对 于 显示 
表格 数据 很 有 用 ， 并 且 很 容易 在 页 面 上 创建 。 但 表格 还 会 生成 大 量 难于 阅读 和 维护 的 代码 。 许 
多 设计 者 首选 基于 CSS 的 布局 ， 正 是 因为 基于 CSS 的 布局 所 包含 的 代码 数量 要 比 具 有 相同 特性 
的 基于 表格 的 布局 使 用 的 代码 数量 少 很 多 。 


咀 7.4.1 什么 是 Web 标 准 
Web 标 准 是 由 W3C 和 其 他 标准 化 组 织 制定 的 一 套 规范 集合 ，Web 标 准 的 目的 在 于 创建 一 个 统 
一 的 用 于 Web 表 现 层 的 技术 标准 ， 以 便于 通过 不 同 浏览 器 或 终端 设备 向 最 终 用 户 展示 信息 内 容 。 
Web 标 准 由 一 系列 规范 组 成 ， 目 前 的 Web 标 准 主要 由 三 大 部 分 组 成 : 结构 (Structure) 、 表 
现 〈Presentation) 和 行为 《Behavior) 。 真 正 符合 Web 标 准 的 网 页 设计 是 指 能 够 灵活 使 用 Web 标 
准 对 Web 内 容 进 行 结构 、 表 现 与 行为 的 分 离 。 


1. 结构 

结构 对 网 页 中 用 到 的 信息 进行 分 类 与 整理 。 在 结构 中 用 到 的 技术 主要 包括 HIML、XML 和 
XHTML 。 
2. 表现 

表现 用 于 对 信息 进行 版 式 、 颜 色 和 大 小 等 形式 控制 。 在 表现 中 用 到 的 技术 主要 是 CSS 层 麦 
样式 表 。 
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i 术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 
| 色 、 
; 只 要 对 相应 的 代码 做 一 些 简单 的 修改 ， 就 可 
| 以 改变 网 页 的 外 观 和 格式 。 采 用 CSS 布 局 有 以 
| 下 优点 。 

; 女 大 大 缩减 页 面 代码 ， 提 高 页 面 浏览 i 
DOM 是 浏览 器 与 内 容 结构 之 间 的 沟通 接 ; 


3. 行为 
行为 是 指 文档 内 部 的 模型 定义 及 交互 行 
为 的 编写 ， 用 于 编写 交互 式 的 文档 。 在 行为 
中 用 到 的 技术 主要 包括 DOM 和 ECMAScript。 
友 DOM (Document Object Model) 文档 对 
象 模型 


口 ， 它 可 以 访问 页 面 上 的 标准 组 件 。 

友 ”ECMAScript 脚 本 语言 
ECMAScript 是 标准 脚本 语言 ， 

现 具体 的 界面 上 对 象 的 交互 操作 。 


ID 的 区 别 
Div 标 记 早 在 HTML3.0 时 代 就 已 经 出 现 ， 


被 引入 ， 它 是 专门 针对 样式 表 而 设计 的 标记 。 


Div 简 单 而 言 是 一 个 区 块 容器 标记 ， 即 ; 太 ”表现 和 内 容 相 分 离 ， 将 设计 部 分 分 离 出 
可 以 容 | 
纳 段落 、 标 题 、 表 格 、 图 片 ， 乃 至 章节 、 摘 ' 六 更 方便 搜索 引擎 的 搜索 ， 
要 和 备注 等 各 种 HTML 元 素 。 因 此 ， 可 以 把 ， 
<div> 与 </div> 中 的 内 容 视 为 一 个 独立 的 对 | 
声明 时 只 需要 对 Div 进 ; 太 table 的 布局 中 ， 垃 圾 代 


行 相应 的 控制 ， 其 中 的 各 标记 元 素 都 会 因此 | 


<div> 与 </div> 之 间 相 当 于 一 个 容器 ， 


象 ， 用 于 CSS 的 控制 。 


而 改变 。 


Span 是 行内 元 素 ，Span 的 前 后 是 不 会 换行 | 


的 ， 它 没有 结构 的 意义 ， 纯 粹 是 应 用 样式 ， 当 
其 他 行内 元 素 都 不 全 适时 ， 可 以 使 用 Span。 


国 7.4.3 ”为 什么 要 使 用 CSS+Div 


布局 


掌握 基于 CSS 的 网 页 布局 方式 ， 


/ .9 


六 提 
但 那 时 并 不 常用 ， 直 到 CSS 的 出 现 ， 才 逐渐 发 | 
挥 出 它 的 优势 。 而 Span 标 记 直到 HTML 4.0 时 才 ; 


是 实现 | 
Web 标 准 的 基础 。 在 主页 制作 时 采用 CSS 技 


无 论 使 用 表格 还 是 CSS， 网 页 布局 都 是 把 大 块 的 内 容 放 进 网 页 的 不 同 
区 域 里 面 。 有 了 CSS， 最 常用 来 组 织 内 容 的 元 素 就 是 <div> 标 签 。 


背景 和 其 他 效果 实现 更 加 精确 的 控制 。 


度 ， 缩 减 带 宽 成 本 。 


i 结构 清晰 ， 容 易 被 搜索 引擎 搜索 到 。 
| 女 “缩短 改版 时 间 ， 只 要 简单 地 修改 几 个 CSS 
它 用 于 实 ; 


文件 就 可 以 重新 设计 一 个 有 成 百 上 千 页 
面 的 站 点 。 


i 太 CSS 非 常 容易 编写 ， 可 以 像 写 HIML 代 码 


一 样 轻松 地 编写 CSS 。 

高 易 用 性 ， 使 用 CSS 可 以 结构 化 
HTML， 如 <p> 标 记 只 用 来 控制 段落 ， 
<heading> 标 记 只 用 来 控制 标题 ，<table> 
标记 只 用 来 表现 格式 化 的 数据 等 。 


来 放 在 一 个 独立 样式 文件 中 。 

用 只 包含 结构 
化 内 容 的 HTML 代替 做 套 的 标记 ， 搜 索引 
擎 将 更 有 效 地 搜索 到 内 容 。 

蚂 会 很 多 ， 一 些 修 
饰 的 样式 及 布局 的 代码 混合 在 一 起 ， 很 
不 直观 。 而 div 更 能 体现 样式 和 结构 相 分 
离 ， 结 构 的 重 构 性 强 。 


i 可 以 将 许多 网 页 的 风格 格式 同时 更 新 ， 


不 用 再 一 页 一 页 地 更 新 了 。 可 以 将 站 点 
上 所 有 的 网 页 风格 都 使 用 一 个 CSS 文 件 进 
行 控制 ， 只 要 修改 这 个 CSS 文 件 中 相应 的 
行 ， 整 个 站 点 的 所 有 页 面 都 会 随 之 发 生 


CSS 排 版 是 一 种 很 新 的 排版 理 


念 ， 首 先 要 将 页 面 使 用 <div> 整 体 划分 几 个 板块 ， 然 后 对 各 个 板块 进行 CSS 定 位 ， 最 后 在 各 个 板 


块 中 添加 相应 的 内 容 。 


1 
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用 7.5.1 将 页 面 用 Div 分 块 


在 利用 CSS 布 局 页 面 mr 
时 ， 首 先 要 有 一 个 整体 的 规 | 人 en ll 
划 ， 包 括 整个 页 面 分 成 哪 ee 


些 模 块 ， 各 个 模块 之 间 的 父 
子 关系 等 。 以 最 简单 的 框架 
为 例 ， 页 面 由 Banner、 主 体 


内 容 (content) 、 菜 单 导航 aa 
(links) 和 脚注 〈footer) 几 
个 部 分 组 成 ， 各 个 部 分 分 别 7 
和 id 来 标识 ， 7-30 
sii 来 标识 ， 如 图 图 7-30 页 面 内 容 框架 


其 页 面 中 的 HTML 框架 代码 如 下 所 示 。 


实例 中 每 个 板块 都 是 一 个 <div>， 这 里 直接 使 用 CSS 中 的 id 来 表示 各 个 板块 ， 页 面 的 所 有 
Div 块 都 属于 container， 一 般 的 Div 排 版 都 会 在 最 外 面 加 上 这 个 父 Div， 便 于 对 页 面 的 整体 进行 调 
整 。 对 于 每 个 Div 块 ， 还 可 以 再 加 入 各 种 元 素 或 行内 元 素 。 


?7.5.2 用 CSS 定 位 各 块 的 位 轩 


当 页 面 的 内 容 已 经 确定 
后 ， 则 需要 根据 内 容 本 身 考 
虑 整体 的 页 面 布 局 类 型 ， 例 
如 单 栏 、 双 栏 、 三 栏 等 ， 这 
里 采用 的 布局 如 图 7-31 所 示 。 

由 图 7-13 可 以 看 出 ， 在 
页 面 外 部 有 一 个 整体 的 框架 
container，banner 位 于 页 面 整 
体 框 架 中 的 最 上 方 ，content 
与 links 位 于 页 面 的 中 部 ， 其 
中 content 占 据 着 页 面 的 绝 大 
部 分 。 最 下 面 是 页 面 的 脚注 gs 
footer。 图 7-31 简单 的 页 面 框架 


en 


CSS 的 语法 结构 仅 由 3 部 分 组 成 ， 分 别 为 选择 符 、 样 式 属性 和 值 ， 基 


本 语法 如 下 。 
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选择 符 { 样 式 属性 : 取 值 :样式 属性 : 取 值 :样式 属性 : 取 值 :…… } 

选择 符 〈(Selector) 指 这 组 样式 编码 所 要 针对 的 对 象 ， 可 以 是 一 个 XHTML 标 签 ， 如 
<body>、<hl>， 也 可 以 是 定义 了 特定 id 或 class 的 标签 ， 如 “#main” 选 择 符 表示 选择 <div 
id=main>， 即 一 个 被 指定 了 main 为 id 的 对 象 。 浏 览 器 将 对 CSS 选 择 符 进行 严格 的 解析 ， 每 一 组 
样式 均 会 被 浏览 器 应 用 到 对 应 的 对 象 上 。 

属性 (Property) 是 CSS 样 式 控制 的 核心 ， 对 于 每 一 个 XHTML 中 的 标签 ，CSS 都 提供 了 丰 
富 的 样式 属性 ， 如 颜色 、 大 小 、 定 位 和 浮动 方式 等 。 

值 (Value) 是 指 属性 的 值 ， 有 两 种 形式 ， 一 种 是 指定 范围 的 值 ， 如 float 属性 ， 只 可 以 使 用 
left、right 和 none3 种 值 ; 另 一 种 为 数值 ， 如 width， 能 够 取 值 于 0 一 9999px， 或 通过 其 他 数学 单 
位 来 指定 

在 实际 应 用 中 ， 往 往 使 用 以 下 类 似 的 应 用 形式 : 

Body {background-color:blue} 

表示 选择 符 为 body， 即 选择 了 页 面 中 的 <body> 标 记 ， 属 性 为 background-color， 这 个 属性 用 
于 控制 对 象 的 背景 色 ， 而 值 为 blue。 页 面 中 的 body 对 象 的 背景 色 通过 使 用 这 组 CSS 编 码 ， 被 定 


义 为 蓝 色 。 
ri 人 
实战 应 用 0 
@ 使 用 CSS 样 式 可 以 灵活 并 更 好 地 控制 页 面 外 观 ， 即 从 精确 的 布局 定位 


到 特定 的 字体 和 文本 样式 。 下 面 通过 实例 介绍 如 何在 网 页 中 创建 及 应 用 CSS 样 式 。 


国 7.7.1 实战 1 一 一 CSS 样 式 美化 文字 


利用 CSS 可 以 固定 字体 大 小 ， 使 网 页 中 的 | 最 终 文件 : 最终 文件 /CH07/ 实 战 1/ indexl.html 


文本 始终 不 随 浏览 器 改变 而 发 生变 化 ， 总 是 园 打开 网 页 文档 执行“ 窗口 ”| “CSS 样 式 ” 
保持 着 原 有 的 大 小 ， 应 用 CSS 固 定 字体 大 小 的 ， | 命令 ， 如 图 7-33 所 示 。 
效果 如 图 7-32 所 示 ， 具 体 的 操作 步骤 如 下 。 


ra dl) 
Wi A We em 0 MD Eo 


图 7-33 ”打开 网 页 文档 


| 园 打开 “CSS 样 式 ” 面板， 在 “CSS 样 式 ” 面 
| 板 中 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 


: 执行 “新 建 ”命令 ， 如 图 7-34 所 示 。 
| 国 弹出 “新 建 CSS 规 则 ”对 话 框 ， 在 对 话 框 中 


图 7-32 应 用 CSS 美 化 字体 的 效果 
原始 文件 : 原始 文件 /CH07/ 实 战 1/index.html 
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汐 


“选择 器 类 型 ”中 选择 “类 ”， 在 “和 


择 器 名 称 ” 中 输入 名 称 ， 在 “规则 定义 ” 
中 选择 “ 仅 限 该 文档 ”， 如 图 7-35 所 示 。 


所 示 。 
国 保存 文档 ， 按 F12 键 在 浏览 器 中 浏览 ， 效 果 
如 图 7-32 所 示 。 


i 


zx, 


CRE | 习 证 


图 7-35 “新 建 CSS 规 则 ”对 话 框 


单 击 


“确定 ”按钮 ， 弹 出“.STYLE1 的 CSS 


规则 定义 ”对 话 框 ， 在 对 话 框 中 将 “Font- 
family” 设 置 为 宋体 ，“Font-size ”设置 为 
12 像 素 ，“Color” 设 置 为 #060，“Line- 
height” 设 置 为 200%， 如 图 7-36 所 示 。 


.5TTLEL 的 C55 燥 则 定义 


Font-fanily 中): 康 体 
Font-size@): lz llox Fontweiet :| 


Tont-sylem): | 加 oztrwariant OD) 
iat :ED |le tert-transfom gg 
co -| 
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图 7- 


单 击 


36 “.STYLE1 的 CSS 规 则 定义 ”对 话 框 


上 “确定” 按钮， 新 建 CSS 样 式 ， 选 中 应 


用 样式 的 文本 ， 单 击 鼠 标的 右键 ， 在 弹出 
的 快捷 菜单 中 执行 “应 用 ”命令 ， 如 图 7-37 } 


图 7-37 应 用 CSS 样 式 


国 7.7.2 ”实战 2 一 一 应 用 CSS 样 
式 制作 阴影 文字 


滤 镜 能 对 样式 所 控制 的 对 象 应 用 特殊 效 
果 (包括 模糊 和 反 转 ) ， 使 用 CSS 样 式 制 作 阴 
影 文字 的 效果 如 图 7-38 所 示 ， 具 体 的 操作 步骤 
如 下 。 

原始 文件 : 原始 文件 /CH07/ 实 战 2/index.html 

最 终 文件 最终 文 件 /CH07/ 实 战 2/index1.html 


图 7-38 使 用 CSS 样 式 制作 阴影 文字 的 效果 
国 打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 如 图 
7-39 所 示 。 
园 执行 “插入 ”|“ 表 格 ” 命 令 ， 插 入 1 行 1 列 


@ 。。 第 7 章 医 JSSSEIDIE 林 二 ES 本 网 两 
的 表格 ，“ 表 格 宽度 ”设置 为 30%0， 单 击 “ 确 定 ”按钮 ， 插 入 表格 ， 如 图 7-40 所 示 。 


Dw mm- ne | [Ow Wm nl 
和 EE 


EBD rm a 
| | 
二 


图 7-39 打开 网 页 文档 图 7-40 插入 表格 


园 将 光标 置 于 表格 内 ， 输 入 文字 ， 执 行 “窗口 ”| “CSS 样 式 ”命令 ， 如 图 7-41 所 示 。 

园 打开 “CSS 样 式 ” 面板， 在 “CSS 样 式 ”面板 中 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 执行 “新 
建 ”命令 ， 弹 出 “新 建 CSS 规 则 ”对 话 框 ， 在 “选择 器 名 称 ” 文 本 框 中 输入 “.yinying”， 在 
“选择 器 类 型 ”中 选择 “类 ”，“ 规 则 定义 ”选择 “ 仅 限 该 文档 ”， 如 图 7-42 所 示 。 


WW 而 =T5T 荆 


图 7-41 输入 文字 图 7-42 “新 建 CSS 规 则 ”对 话 框 
四 单 击 “ 确 定 ” 按 钮 ， 弹 出 “. yinying 的 CSS 规 则 定义 ”对 话 框 ， 选 择 “ 分 类 ”中 的 “类 型 ” 选 
项 ，“Font-family” 设 置 为 宋体 ，“Font-size” 设 置 为 30,“Font-weight” 设 置 为 bold4，“color” 
设置 为 #FFF， 如 图 7-43 所 示 。 
国 单 击 “ 应 用 ”按钮 ， 再 选择 “分 类 ”中 的 “扩展 ”选项 ，“Filter” 设 置 为 “Shadow(Color=? ， 
Direction=? )”， 如 图 7-44 所 示 。 


-yinying 的 C55 规则 定义 


分 类 
要 re 0 FE ~ 
ztcsinG): 园 说 区 届 rontweitt wai | i 
的 ons 一 司 CPP | Pagebred- sfter D) 
tnehienW; 5 国 本 retreuceeeg:[ | 
Text-decoration D): | color ©) :Car / crse:[ 转 


总 
TEST 


FilterE) :| 


?Strength=?) 


OEgt=?, OEEY=7, Positive=?) 


取消 


ET 


图 7-43 。“.yinying 的 CSS 规 则 定义 ”对 话 框 图 7-44 选择 “Shadow” 选 项 
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Shadow 滤 镜 可 以 使 文字 产生 阴影 效果 ， 其 语法 格式 为 : Shadow(Color-?，Direction=?)， 其 
中 ，Color 为 投影 的 颜色 ，Direction 为 投影 的 角度 ， 取 值 范 围 为 0-360， 最 常用 的 取 值 是 50， 采 
这 个 值 ， 就 可 以 看 出 明显 的 阴影 效果 。 


在 “Filter” 中 设置 “Shadow(Color=#ccc333, Direction=100)”， 如 图 7-45 所 示 。 
园 单 击 “ 确 定 ”按钮 ， 在 文档 中 选中 表格 ， 然 后 在 “CSS 样 式 ”面板 中 右键 单 击 新 建 的 样式 ， 在 
弹出 的 快捷 菜单 中 执行 “应 用 ”命令 ， 如 图 7-46 所 示 。 


六 


扩展 


agerbrealrbefors 四 ) 


ER 
所 牧 池 此 


Fage-brearafter 加) 


Carser ©) 
Filter E) 


图 7-45 设置 阴影 
园 应 用 样式 后 ， 保 存 网 页 文档 ， 按 F12 键 在 浏览 器 中 预览 阴影 文字 效果 ， 如 图 7-38 所 示 。 


/ 8 课 后 练习 : 
@ 


一 、 填 空 题 
1， 控制 网 页 元 素 外 观 的 CSS 样 式 用 来 定义 字体 、 颜 色 、 边 距 和 字 间 距 等 属性 ， 可 以 
使 用 Dreamweaver 来 对 所 有 的 CSS 属 性 进行 设置 。CSS 属 性 被 分 为 9 大 类 : _ _、 
入 、 和 o 
2. CSS 的 语法 结构 仅 由 3 部 分 组 成 ， 分 别 为 和 
二 、 操 作 题 


1. 利用 链接 外 部 CSS 样 式 表 给 图 7-47 所 示 的 网 页 应 用 样式 ， 如 图 7-48 所 示 。 


ES RI ES SO OR ER EA 


上 打开 “Css 样式 " 面板 ， 在 面板 中 单 南 饼 标 右键， 在 弹出 的 快捷 菜单 中 执行 “附加 样式 表 ” 命令 ， 弹 上 
上 4。 “链接 外 部 样式 表 ” 对 话 框 ， 在 该 对 话 框 中 单 击 “文件 /URL” 下拉 列表 框 右 侧 的 “浏览 ” 按钮， 选择 
上 Limages 文 件 夹 中 的 link.css 文 件 。 1 


原始 文件 : 原始 文件 /CH07/ 操 作 题 1/index.htm 
最 终 文件 :最终 文 件 /CH07/ 操 作 题 1/index1.htm 
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图 7-47 原始 文件 图 7-48 链接 外 表 样式 表 歼 果 
2. 利用 CSS 滤 镜 给 图 7-49 所 示 的 “公司 简介 ”文字 创建 动感 阴影 文字 ， 如 图 7-50 所 示 。 


1 在 “CSS 规 则 定义 ”对 话 框 中 ， 选 择 “分 类 ”中 的 “扩展 ”选项 ， 设 置 Filter 滤 镜 即 可 。 I 


ee 四 本 本 四 mm mm mm mm mm mm mm mm mm em em em 则 
原始 文件 : 原始 文件 /CH07/ 操 作 题 2/index.htm 
最 终 文件 : 最终 文件 /CH07/ 操 作 题 2/index1.htm 


SA A 


0 
二 


,OE Me, PE 


ET 


图 7-49 原始 文件 图 7-50 ”应 用 CSS 动 感 阴影 文字 效果 


La 


IE 识 尝 实录 。。 一 全 
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设计 网 页 的 第 一 步 是 设计 布局 ， 好 的 网 页 布局 会 令 访问 者 耳目 一 新 ， 
同样 也 可 以 使 访问 者 比较 容易 在 站 点 上 找到 他 们 所 需要 的 信息 。 无 论 使 用 表格 还 是 CSS， 网 页 
布局 都 是 把 大 块 的 内 容 放 进 网 页 的 不 同 区 域 里 面 。 
3 ec 而 忽视 了 代码 的 理性 
分 析 。 迄 今 为 止 ， 表 格 仍然 主导 着 视觉 丰富 的 网 站 的 设计 方式 ， 但 它 却 阻碍 了 一 种 更 好 的 、 更 
ea 更 灵活 的 ， 而 且 功 能 更 强大 的 CSS 布 局 方法 。 


118 


@ 
| 条 


全 


本 章 导 读 
Dreamweaver CC 提供 了 快速 制作 网 页 特效 


的 行为 ， 可 以 让 即使 不 会 编程 的 设计 者 也 能 制 
作出 漂亮 的 特效 ， 本 章 将 学 习 行为 的 使 用 。 行 
为 是 Dreamweaver 内 置 的 JavaScript 程 序 库 。 在 
页 面 中 使 用 行为 可 以 让 不 懂得 编程 的 人 也 能 将 
JavaScript 程 序 添加 到 页 面 中 ， 从 而 制作 出 具有 
动态 效果 与 交互 效果 的 网 页 。 


技术 要 点 
认识 事件 
认识 动作 
掌握 行为 的 使 用 方法 
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| 


特效 中 的 行为 和 事件 


@ 在 Dreamweaver 中 ， 行 为 是 事件 和 动作 的 组 合 。 事 件 是 特定 的 时 间或 
是 用 户 在 某 时 所 发 出 的 指令 后 紧 接 着 发 生 的 ， 而 动作 是 事件 发 生 后 ， 网 页 所 要 做 出 的 反应 。 


1 
件 月 


网 页 事件 


行为 ， 则 需要 把 事件 指定 为 单 击 瞬间 onClick。 表 8-1 所 示 是 Dreamweaver 中 常见 的 导 


日 于 指定 选 定 的 行为 动作 在 何 种 情况 下 发 生 。 如 想 应 用 单 击 图 像 时 跳 转 到 指定 网 站 的 


表 8-1 Dreamweaver 中 常见 的 事件 


件 。 


内 容 事 件 
onAbort 在 浏览 器 窗口 中 停止 加 载 网 页 文档 的 操作 时 发 生 的 事件 
onMove 移动 窗口 或 框架 时 发 生 的 事件 
onLoad 选 定 的 对 象 出 现在 浏览 器 上 时 发 生 的 事件 
onResize 访问 者 改变 窗口 或 帧 的 大 小 时 发 生 的 事件 
onUnLoad 访问 者 退出 网 页 文档 时 发 生 的 事件 
onClick 用 鼠标 单 击 选 定 元 素 的 一 瞬间 发 生 的 事件 
onBlur 和 鼠标 指针 移动 到 窗口 或 帧 外 部 ， 即 在 这 种 非 激活 状态 下 发 生 的 事件 
onDragDrop 拖 动 并 放置 选 定 元 素 的 那 一 瞬间 发 生 的 事件 
onDragStart 拖 动 选 定 元 素 的 那 一 瞬间 发 生 的 事件 
onFocus 筷 标 指针 移动 到 窗口 或 帧 上 ， 激 活 之 后 发 生 的 事件 
onMouseDown 单 击 鼠标 右键 一 瞬间 发 生 的 事件 
onMouseMove 和 鼠标 指针 指向 字段 并 在 字段 内 移动 时 发 生 的 事件 
onMouseOnut 筷 标 指针 经 过 选 定 元 素 之 外 时 发 生 的 事件 
onMouseOver 筷 标 指针 经 过 选 定 元 素 上 方 时 发 生 的 事件 
onMouseUp 单 击 息 标 右键 ， 然 后 释放 时 发 生 的 事件 
onScroll 访问 者 在 浏览 器 上 移动 滚动 条 时 发 生 的 事件 
onKeyDown 当 访问 者 按 下 任意 键 时 发 生 的 事件 
onKeyPress 当 访问 者 按 下 和 释放 任意 键 时 发 生 的 事件 
onKeyUp 在 键盘 上 按 下 特定 键 并 释放 时 发 生 的 事件 
onAfterUpdate 更 新 表单 文档 内 容 时 发 生 的 事件 
onBeforeUpdate 改变 表单 文档 项 目 时 发 生 的 事件 
onChange 访问 者 修改 表单 文档 的 初始 值 时 发 生 的 事件 
onReset 将 表单 文档 重 设置 为 初始 值 时 发 生 的 事件 
onSubmit 访问 者 传送 表单 文档 时 发 生 的 事件 
onSelect 访问 者 选 定 文本 字段 中 的 内 容 时 发 生 的 事件 
onError 在 加 载 文档 的 过 程 中 ， 发 生 错误 时 发 生 的 事件 
onFilterChange 运用 于 选 定 元 素 的 字段 发 生变 化 时 发 生 的 事件 
Onfinish Marquee 用 功能 来 显示 的 内 容 结 束 时 发 生 的 事件 
Onstart Marquee 开始 应 用 功能 时 发 生 的 事件 
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所 谓 的 动作 就 是 设 定 更 换 图 片 、 弹 出 警告 信息 框 等 特殊 的 JavaScript 效 果 。 在 设 定 的 事件 发 
生 时 运行 动作 。 表 8-2 所 示 是 Dreamweaver 提 供 的 常见 动作 。 


表 8-2 ”Dreamweaver 提 供 的 常见 动作 


动 作 内 容 
调用 JavaScript 调用 JavaScript 函 数 
改变 属性 改变 选择 对 象 的 属性 
检查 插件 确认 是 否 设 有 运行 网 页 的 插件 
拖 动 AP 元素 允许 在 浏览 器 中 自由 拖 动 AP Div 
转 到 URL 可 以 转 到 特定 的 站 点 或 网 页 文档 上 
跳 转 菜单 可 以 创建 若干 个 链接 的 跳 转 菜单 
跳 转 菜单 开始 pi 只 有 单 击 GO 按钮 才 可 以 移动 到 链接 
打开 浏览 器 窗口 在 新 窗口 中 打开 URL 
弹出 消息 设置 的 事件 发 生 之 后 ， 弹 出 警告 信息 
预先 载 入 图 像 为 了 在 浏览 器 中 快速 显示 图 片 ， 事 先 下 载 图 片 之 后 显示 出 来 
设置 框架 文本 在 选 定 的 帧 上 显示 指定 的 内 容 
设置 状态 栏 文 本 在 状态 栏 中 显示 指定 的 内 容 
设置 文本 域 文 字 在 文本 字段 区 域 显 示 指 定 的 内 容 
显示 -隐藏 元 素 显示 或 隐藏 特定 的 AP Div 
交换 图 像 发 生 设置 的 事件 后 ， 用 其 他 图 片 来 取代 选 定 的 图 片 
恢复 交换 图 像 在 运用 交换 图 像 动 作 之 后 ， 显 示 原 来 的 图 片 
检查 表单 在 检查 表单 文档 有 效 性 的 时 候 使 用 


pp 使 用 Dreamweaver 内 置 行为 o 


|N8.2.1 


课堂 练 一 练 一 一 交换 图 像 


“交换 图 像 ”动作 是 将 一 幅 图 像 蔡 换 成 另外 一 幅 图 像 ， 一 个 交换 图 像 其 实 是 由 两 幅 图 像 组 
成 的 。 下 面 通过 实例 讲述 创建 交换 图 像 ， 鼠 标 未 经 过 图 像 时 的 效果 ， 如 图 8-1 所 示 ， 当 鼠标 经 
过 图 像 时 的 效果 如 图 8-2 所 示 ， 具 体操 作 步 骤 如 下 。 
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图 8-1 未 经 过 图 像 时 的 效果 


per ,rH ree on MTN 


图 8-2 和 饼 标 经 过 图 像 时 的 效果 


19 WAAR OER I ta mn ee 


原始 文件 : 原始 文件 /CH08/8.2.1/index.html 
最 终 文件 ， 最 终 文 件 /CHO8/8.2.1/index1.html 


国 打开 网 页 文档 ， 如 图 8-3 所 示 。 


DW SN WD WW A SM Wo ol Wd SOW wh EE 
rem 


EE [3 


图 8-3 打开 网 页 文档 
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园 打开 “行为 ”面板 ， 在 面板 中 单 击 “ 添 加 行 


为 ”按钮 ， 在 弹出 的 菜单 中 选择 “交换 
图 像 ”选项 ， 如 图 8-4 所 示 。 


弹出 “交换 图 像 ” 对 话 框 ， 在 对 话 框 中 单 和 


图 8-4 选择 “交换 图 像 ”选项 


Hr 


“ 设 定 原始 档 为 ”文本 框 右边 的 “浏览 ” 
按钮 ， 如 图 8-5 所 示 。 


固 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 


RE 


预 载 入 的 图 像 images/02.jpg， 如 图 8-6 所 示 。 


| 
1 
中 
,| 


gr [本 | 
el 2 | 
| [| 


设 定 原始 档 为: | 
四 预先 载 和 图像 
忌 限 标 痢 开 时 恢复 图 像 


图 8-5 “交换 图 像 ” 对 话 框 


~ [Be gtjpsripeg:p | 


mes) (eae) (es 


图 8-6 “选择 图 像 源 文件 ”对 话 框 


“交换 图 像 ” 对 话 框 中 可 以 进行 如 下 设置 。 
友 图 像 : 在 列表 中 选择 要 更 改 其 源 的 图 像 。 
友 设 定 原始 档 为 : 单 击 “浏览 ” 按 钴 选择 新 图 像 


@ 一 e 一 第 3 章 于 
EE 
上 文件， 文本 框 中 显示 新 轩 像 的 路 径 和 文件 名 。 I 
重文 预先 载 入 图 像 : 匀 选 该 复 选 框 ， 这 样 在 载 入 网 页 时 ， 新 图 像 将 载 入 到 浏览 器 的 缓冲 中 ， 防 止 当 图 像 该 出 上 
I 现时 由 于 下 载 而 导致 的 延迟 。 1 
上 次 鼠标 滑 开 时 恢复 图 像 : 匀 选 该 复 选 框 表 示 当 饼 标 离开 图 片 时 ， 图 片 会 自动 恢复 为 原始 图 像 。 1 
生 
国 单 击 “ 确 定 ” 按 钮 ， 添 加 到 文本 框 中 ， 如 图 8-7 所 示 。 

国 单 击 “ 确 定 ”按钮 ， 添 加 行为 到 “行为 ”面板 中 ， 如 图 8-8 所 示 。 


[ET 


上 【 设 定 原 怒 档 为 inages/02. jps EE.] 
' 可 预先 载 和 图 
忆 网 标 测 开 时 恢 槛 图像 
图 8-7 “交换 图 像 ” 对 话 框 图 8-8 添加 行为 到 “行为 ”面板 


1 “交换 图 像 ”动作 自动 预先 载 入 在 “交换 图 像 ”对 话 框 中 选择 “预先 载 入 图 像 ”选项 时 所 有 高 充 显 示 上 

的 图 你 ， 因 此 当 使 用 “ 交 摘 图 像 ”时 不 需要 手动 添加 预先 载 和 图像。 

回 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 鼠 标 指针 未 接近 图 像 时 的 效果 如 图 8-1 所 示 ， 鼠 标 指针 接 
近 图 像 时 的 效果 如 图 8-2 所 示 。 


如 果 没有 为 图 像 命名 ，“ 交 换 图 像 ”动作 仍 将 起 作用 ;， 当 将 该 行为 附加 到 某 个 对 象 时 ， 它 将 为 未 命名 


的 图 像 自动 命名 。 但 是 ， 如 果 所 有 图 像 都 预先 命名 ， 则 在 “交换 图 像 ”对 话 框 中 更 容易 区 分 它们 。 


肯 8.2.2 课堂 练 一 练 一 一 弹出 提示 信息 

弹出 信息 显示 一 个 带 
有 指定 信息 的 警告 窗口 ， 因 
为 该 警告 窗口 只 有 一 个 “ 确 
定 ” 按 钮 ， 所 以 使 用 此 动作 
可 以 提供 信息 ， 而 不 能 为 用 
户 提供 选择 。 创 建 弹出 提示 
信息 网 页 的 效果 如 图 8-9 所 
示 ， 具 体操 作 步 骤 如 下 。 


图 8-9 ”弹出 提示 信息 效果 
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ELDER 识 党 实录 。。 一 全 
原始 文件 : 原始 文件 /CHO8/8.2.2/index.html | 所 示 。 
最 终 文 件 : 最 终 文件 /CH08/8.2.2/indexl.html : 
国 打开 网 页 文档 ， 单 击 文档 窗口 中 的 <body> | 
标签 ， 如 图 8-10 所 示 。 : 


DW Zan may BE EA ge Wo) eo a OW mh -WB oll 


TE 


图 8-13 添加 行为 


| 和 按 F12 键 即 可 在 浏览 器 中 看 到 弹 
出 提示 信息 ， 网 页 效果 如 图 8-9 所 示 。 


一 | 公 提 示 思 一 一 一 一 一 一 一 一 一 一 一 呈 
图 8-10 打开 网 页 文档 | 中 信息 一 定 要 简短 ， 如 果 超 出 状态 栏 的 大 小 ， 目 
I 


园 执行 | “窗口 ”| “行为 ”命令 , 打开 “ 行 | | 上 1 浏览 器 将 自动 截 短 该 信息 。 
为 ”面板 ， 单 击 “ 行 为 ”面板 中 的 “添加 | | 
行为 ”按钮 到 ， 在 弹出 菜单 中 选择 “弹出 上 8.2.3 ”课堂 练 一 练 一 一 打开 


信息 ”选项 ， 如 图 8-11 所 示 。 | 浏览 器 窗口 了 


Bs | ; 使 用 “打开 浏览 器 窗口 ”动作 在 打开 

| ; 当前 网 页 的 同时 ， 还 可 以 再 打开 一 个 新 的 窗 

区 口 。 创 建 打开 浏览 器 窗口 网 页 的 效果 如 图 8-14 
.| | | 所 示 ， 具 体操 作 步 又 如 下 。 


[7 


图 8-11 选择 “弹出 信息 ”选项 : 

弹出 “弹出 信息 ”对 话 框 ， 输 入 文本 | 
“您 好 ， 欢 迎 光临 我 们 的 网 站 !”， 如 图 ; 
8-12 所 示 。 | 


图 8-14 打开 浏览 器 窗口 网 页 的 效果 
原始 文件 : 原始 文件 /CHO8/8.2.3/index.html 
最 终 文件 : 最终 文件 /CH08/8.2.3/index1.html 


PE | 国 打开 网 页 文档 ， 单 击 文档 窗口 中 的 <body> 


! 标签 ， 如 图 8-15 所 示 。 
单 击 “确定 ”按钮 ， 添 加 行为 ， 如 图 8-13 : 
国 二 | 园 打开 “行为 ”面板 ， 在 “行为 ”面板 中 单 


ET 
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”信人 
mmx, 


“添加 行为 ”按钮 出， 在 弹出 的 菜单 中 选择 “打开 浏览 器 窗口 


DW nn SuH saw Sh Wa eo) Fro al EW Sm 


如 图 8-16 所 示 。 


| 


图 8-15 打开 网 页 文档 


I 按 ShifttF4 快 捷 键 也 可 以 打开 “行为 ”面板 。 


图 8-16 选择 “打开 浏览 器 窗口 ”命令 


园 选中 命令 


后 ， 弹 出 “打开 浏览 器 窗口 ”对 话 框 ， 


如 图 8-17 所 示 。 


园 在 对 话 框 中 单 击 “ 要 显示 的 URL” 文 本 框 右边 的 “浏览 ”按钮 ， 弹 出 “选择 文件 ”对 话 框 ， 在 


对 话 框 中 选择 guanggao.html， 如 图 8-18 所 示 。 


Er 


日 @| 


如 织 ~ BrxH 天 
x sm 为 了 有 册子 防止 作者 Be 的 
二 3 | 计 昌 机， 已 阻止 了 本 全 片 , 
由 加 /8123 下 | 单 二 比 条 月 [/ 到 看 图 片 

EE E 

i] | 
志 HE 
要 的 URL 各 WINT (Cy 


(NY. ouanggac html 


“打开 浏览 器 窗口 ”对 话 框 


图 8-18 “选择 文件 ”对 话 框 


在 “打开 浏览 器 窗口 ”对 话 框 中 可 以 进行 如 下 设置 。 
要 显示 的 URL: 填 入 浏览 器 窗口 中 要 打开 链接 的 路 径 ， 可 以 单 击 “ 浏 览 ”按钮 找到 要 在 浏览 器 窗口 打 


开 的 文件 。 
窗口 宽度 : 设置 窗口 的 宽度 。 
窗口 高 度 : 设置 窗口 的 高 度 。 


属性 : 设置 打开 浏览 器 窗口 的 一 些 参 数 。 选 中 “ 


园 单 击 “ 确 定 ”按钮 ， 添 加 到 文本 框 ， 将 “ 宽 ” 
入 名 称 ，“ 属 性 ”选择 “调整 大 小 手柄 ”， 如 


人 


设置 为 560，“ 高 ”设置 为 00，“ 窗 


导航 工具 栏 ” 为 包含 导航 条 ; 选中 “菜单 条 ”为 包含 
莱 单 条 ; 选中 “地 址 工具 栏 ”后 在 打开 浏览 器 窗口 中 显示 地 址 栏 ; 选中 “需要 时 使 用 滚动 条 ”， 如 果 
窗口 中 内 容 超出 窗口 大 小 ， 则 显示 滚动 条 ; 选中 “状态 栏 ” 后 可 以 在 弹出 窗口 中 显示 滚动 条 ; 选中 
“调整 大 小 手柄 ”， 浏 览 者 可 以 调整 窗口 大 小 。 
窗口 名 称 : 给 当前 窗口 命名 。 


名 称 ” 中 输 


图 8-19 所 示 。 
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课堂 实录 “e 一 个 
园 单 击 “ 确 定 ” 按 钮 ， 将 行为 添加 到 “行为 ”面板 中 ， 如 图 8-20 所 示 。 保 存 文 档 ， 按 F12 键 在 浏览 


器 中 可 以 预览 效果 。 
Dw =em me EW sD qaM) exol sg 9 SOW) wh ES - 
EREGESCIIGSC 3 
00D 关于 壬 站。 困 同 中 心 PE 
-性 
We 
图 8-19 “打开 浏览 器 窗口 ” 对 话 框 图 8-20 添加 行为 
前 8.2.4 课堂 练 一 练 一 一 转 到 URL 一 -一 


“ 转 到 URL” 动 作 是 设置 链接 的 时 候 使 用 的 动作 。 通 常 的 链接 是 在 单 击 后 跳 转 到 相应 的 网 
页 文档 中 ， 但 是 “ 转 到 URL” 动 作 在 把 鼠标 放 上 后 或 者 双击 时 ， 都 可 以 设置 不 同 的 事件 来 加 以 
链接 。 跳 转 前 的 效果 和 跳 转 后 的 效果 分 别 如 图 8-21 和 图 8-22 所 示 ， 具 体操 作 步 又 如 下 。 

原始 文件 : 原始 文件 /CHO08/8.2.4/index.html 

最 终 文件 : 最 终 文件 /CH08/8.2.4/index1.html 


图 8-21 跳 转 前 的 效果 图 8-22” 跳 转 后 的 效果 
国 打开 网 页 文档 ， 单 击 文档 窗口 中 的 <body> 标 签 ,执行 “窗口 ”| “行为 ”命令 ， 如 图 8-23 所 示 。 
园 打开 “行为 ”面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 而， 在 弹出 的 菜单 中 选择 “ 转 到 URL” 命 


令 ， 如 图 8-24 所 示 。 
园 选择 命令 后 ， 弹 出 “ 转 到 URL” 对 话 框 ， 在 对 话 框 中 单 击 URIL 文 本 框 右边 的 “浏览 ”按钮 ， 如 
图 8-25 所 示 。 
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图 8-24 选择 “ 转 到 URL” 选项 图 8-25 “ 转 到 URL” 对 话 框 
园 弹出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 选择 ; 
文件 ndexl.htm， 如 图 8-26 所 示 。 : 


| 图 8-27 设置 “ 转 到 URL” 对 话 框 
| 园 单 击 “确定 ”按钮 ， 将 行为 添加 到 “行为 ” 
面板 中 ， 如 图 8-28 所 示 。 


Eco] CT 
=) ED [有 


图 8-26 “选择 文件 ”对 话 框 


“ 转 到 URL” 对 话 框 中 可 以 进行 如 下 设置 。 
友 打开 在 : 选择 打开 链接 的 窗口 。 如 果 是 框架 


网 页 ， 选 择 打开 链接 的 框架 。 
交 URL: 输入 链接 的 地 址 ， 也 可 以 单 击 “ 浏 
览 ” 按 钮 ， 在 本 地 硬盘 中 查找 链接 的 文件 。 


| 图 8-28 添加 到 “行为 ”面板 

| 回 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 跳 转 

园 单 击 “ 确 定 ” 按 钮 ， 添 加 到 文本 框 中 ， 如 图 ; 。 ”前 的 效果 和 跳 转 后 的 效果 分 别 如 图 8-21 和 图 
8-27 所 示 。 : 8-22 所 示 。 


要 7 


D333 识 堂 文 录 “一 仿 
轩 8.2.5 ”课堂 练 一 


选中 的 图 和 像 (如 那些 将 通过 行为 或 JavaScrip 
调 入 的 图 像 ) 立即 出 现 ， 而 是 先 将 它们 载 入 
到 浏览 器 缓存 中 。 这 样 做 可 以 防止 当 图 像 应 
该 出 现时 由 于 下 载 而 导致 延迟 。 预 先 载 入 图 
片 的 效果 如 图 8-29 所 示 ， 具 体操 作 步 骤 如 下 。 


窒 灾 年 馆 网 拓 人 刘 齐 和 


@ xsrs 


Mr | Om | Rp | irr | TR | rs | np | Sm OAR 


图 8-29 ”预先 载 入 图 片 的 效果 
原始 文件 :原始 文件 /CHO8/8.2.5/index.html 
最 终 文 件 : 最 终 文件 /CH08/8.2.5/indexl.html 


国 打开 网 页 文档 ， 如 图 8-30 所 示 。 


Er 
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图 8-30 ”打开 网 页 文档 
加 打开 “行为 ”面板 ， 在 面板 中 单 击 “ 添 加 行 


为 ”按钮 配 ， 在 弹出 的 菜单 中 选择 “预先 
载 入 图 像 ” 动 作 选 项 ， 如 图 8-31 所 示 。 


128 


ee 
“预先 载 入 图像 ”动作 将 不 会 使 网 页 中 | 


图 像 ”选项 

预先 载 入 图 像 ” 对 话 框 ， 在 对 话 杠 

中 单 击 “ 图 像 源 文件 ”文本 框 右边 的 “ 浏 
览 ” 按 钮 ， 如 图 8-32 所 示 。 

[Eee FP 


图 8-32 “预先 载 入 图 像 ”对 话 框 


园 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 
预 载 入 的 图 像 ， 如 图 8-33 所 示 。 


slHsla0s4 20091116l103 20091l6M110 。。 bsjpg 


FT 区 = 仿 


Ce wm 


| 
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图 8-33 “< 选择 图 像 源 文件 ” 对 话 框 
国 单 击 “ 确 定 ” 按 钮 ， 添 加 到 文本 框 中 ， 如 图 


图 8-34 


“预先 载 入 图 像 ” 对 话 框 


@_。。 第 ?3 章 四 证 2 于 2 


国 单 击 “ 确 定 ”按钮 ， 添 加 行为 
到 “行为 ”面板 中 ， 如 图 8-35 
所 示 。 

保存 文档 ， 按 F12 键 在 浏览 

中 预览 ， 效 果 如 图 8-29 所 示 。 


用 8.2.6 课堂 练 一 练 一 一 检查 表 


“检查 表单 ”动作 检查 指 Pa 
定 文本 域 的 内 容 以 确保 用 户 输 入 
了 正确 的 数据 类 型 。 使 用 onBlur 
事件 将 此 动作 分 别 附加 到 各 文本 
域 ， 在 用 户 填写 表单 时 对 文本 域 
进行 检查 ， 或 使 用 onSubmit 事 件 
将 其 附加 到 表单 ， 在 用 户 单 击 
“提交 ”按钮 时 同时 对 多 个 文本 
域 进行 检查 。 将 此 动作 附加 到 表 


单 ， 防 止 表 单 提交 到 服务 器 后 文 人 = 

本 域 包含 无 效 的 数据 。“ 检 查 表 站 
单 ” 动 作 的 效果 如 图 8-36 所 示 ， ES 
具体 操作 步骤 如 下 。 


图 8-36 检查 表单 效果 


原始 文件 : 原始 文件 /CH08/8.2.6/index.html 
最 终 文件 : 最 终 文件 /CH08/8.2.6/indexl.html 

打开 网 页 文档 ， 选 中 表单 域 ， 执 行 “ 窗 口 ”|“ 行 为 ”命令 ， 如 图 8-37 所 示 。 

园 打开 “行为 ”面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 国 ， 在 弹出 菜单 中 选择 “检查 表单 ” 命 
令 ， 如 图 8-38 所 示 。 


DW ZH5 emo em SMD Me ea) So al EW So 过 -加 DT a 四 mw. 国 O[TeTz 
vom nm a 


图 8-37 打开 网 页 文档 图 8-38 选择 “检查 表单 ”命令 


ET 识 堂 实录 。。 一 全 
园 选择 命令 后 ， 弹 出 “检查 表单 ”对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 8-39 所 示 。 


园 单 击 “ 确 定 ” 按 钮 ， 添 加 到 “行为 ”面板 中 ， 将 事件 设置 为 oaSubmit; 如 图 8-40 所 示 。 
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值 ，V | 必需 的 


可 接受 ， 号 任何 东西 


加 电子 邮件 地 址 


图 8-39 “检查 表单 ”对 话 框 图 8-40 添加 到 “行为 ”面板 


该 对 话 框 的 默认 状态 中 “可 接受 ”选项 组 中 可 以 进行 如 下 设置 。 

任何 东西 : 如 果 该 文本 域 是 必需 的 但 不 需要 包含 任何 特定 类 型 的 数据 ， 则 使 用 “任何 东西 ”选项 。 
电子 邮件 地 址 : 使 用 “电子 邮件 地 址 ”选项 检查 该 域 是 否 包含 一 个 @ 符 号 。 

数字 : 使 用 “数字 ”选项 检查 该 文本 域 是 否 只 包含 数字 。 

数字 从 : 使 用 “数字 从 ”选项 检查 该 文本 域 是 否 包含 特定 范围 内 的 数字 。 


园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 。 当 在 文本 域 中 输入 不 规则 电子 邮件 地 址 和 姓名 时 ， 表 
单 将 无 法 正常 提交 到 后 台 服 务 器 ， 这 时 会 出 现 提示 信息 框 ， 并 要 求 重新 输入 ， 如 图 8-36 所 示 。 


肯 8.2.7 课堂 练 一 练 一 一 设置 状态 栏 文本 
“设置 状态 栏 文本 ” 
用 于 设置 状态 栏 中 显示 的 信 
息 ， 在 适当 的 触发 事件 触发 
后 ， 在 状态 栏 中 显示 信息 。 
下 面 通 过 实例 讲述 状态 栏 文 
本 的 设置 ， 效 果 如 图 8-41 所 
示 ， 具 体操 作 步 骤 如 下 。 
原始 文件 : 原始 文件 / 
CH08/8.2.7/index html 
最 终 文件 : 最 终 文 件 / 
CH08/8.2.7/indexl html 
国 打开 网 页 文档 ， 单 击 文档 
窗口 中 左下 脚 的 <body> 标 图 8-41 设置 状态 栏 文本 的 效果 


签 ， 如 图 8- 和 2 所 示 。 > 


园 打开 “行为 ”面板 ， 单 击 “上 “设置 状态 栏 文本 ”动作 作用 与 弹出 信息 动作 很 相似 ， 不 同 的 上 
“添加 行为 ”按钮 可， 【是 如 果 使 用 消息 框 来 显示 文本 ， 访 问 者 必须 单 击 “ 确 定 ” 按 钥 才 可 以 肯 

在 弹出 的 菜单 中 选择 “ 设 【继续 浏览 网 页 中 的 内 容 。 而 在 状态 栏 中 显示 的 文本 信息 不 会 影响 访问 上 
置 文本 "| “设置 状态 栏 文 。 【者 的 浏览 速度 。 浏 览 才 会 常常 包 略 状态 栏 中 的 消息 ， 如 果 消息 非常 重 上 
ls, 则 考虑 将 其 显示 为 弹出 式 消息 或 层 文本 。 I 


”命令 ， 如 图 8 9 所 示 。 IE 


| oar wm RHO a 2 Tndod hm 
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图 8-42 打开 网 页 文档 图 8-43 选择 “设置 状态 栏 文本 ”选项 
国 弹出 “设置 状态 栏 文 本 ”对 话 框 ， 在 “消息 ”文本 框 中 输入 文本 “欢迎 光临 我 们 的 网 站 ! ”， 
如 图 8-44 所 示 。 
园 单 击 “ 确 定 ” 按 钮 ， 将 行为 添加 到 “行为 ”面板 中 ， 如 图 8-45 所 示 。 


消息 i | 3 
好 支持 更 水 快 态 栏 ; 向 CE 于 消 
本 从 许 此 功能 ， ER 


图 8-44 “设置 状态 栏 文本 ”对 话 框 图 8-45 添加 行为 
Cf 


1 在 “设置 状态 栏 文 本 ”对 话 框 中 的 “消息 ”文本 框 中 输入 消息 。 保 持 该 消息 简明 扼要 。 如 果 消息 不 能 和 
中 完全 让 在 状态 栏 中 ， 浏 览 器 将 截断 消息 。 I 


国 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 8-41 所 示 。 


8. 2 利用 脚本 制作 特效 网 页 


在 网 页 制作 中 ，JavaScript 是 常见 的 脚本 语言 ， 它 可 以 做 入 到 HIML 
中 ， 是 动态 特效 网 页 设计 的 最 佳 选择 ， 同 时 也 是 浏览 器 普遍 支持 的 网 页 脚本 
二 


虽 8.3.1 课堂 练 一 练 一 一 制作 滚动 公告 网 页 
滚动 公告 栏 也 称 滚动 字幕 。 滚 动 公告 栏 的 应 用 将 使 得 整个 网 页 更 有 动感 ， 显 得 很 有 生气 ， 
如 图 8-46 所 示 。 制 作 流 动 公 告 栏 的 具体 操作 步骤 如 下 。 
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图 8-49 所 示 。 


aaa -post 
pnaspn pear mmes 昌 
ee 国 国 汪 -aaws> 

Layee - 
a - 
Ph 1 


图 8-48 输入 代码 


EEE 
国 Mbe sean 
图 8-46 滚动 公告 效果 Ee 
原始 文件 ， 原 始 文件 /CHO8/8.3.1/index.html Ei 
最 终 文件 :最终 文件 /CH08/8.3.1/index1.html ee 
国 打开 网 页 文档 ， 选 中 文字 ， 如 图 8-47 所 示 
[DW smn mr 是 M A wi ao Sol Nan BOW me CT 
图 8-49 输入 代码 
园 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 
如 图 8-46 所 示 。 


<marquee> 主 要 有 下 列 属 性 。 
align: 字幕 文字 对 齐 方式 。 
width: 字幕 宽度 。 


图 8-47 打开 网 页 文档 


打开 “代码 ”视图 状态 ， 在 文字 的 前 面 加 上 
一 段 代码 ， 如 图 8-48 所 示 。 


high: 字幕 高 度 。 

direction: 文字 滚动 方向 ， 其 值 可 取 right、 
up、down。 

scrolldelay: 滚动 延迟 时 间 ， 单 位 毫秒 。 
scrollamount: 滚动 数量 ， 单 位 像素 。 


在 文字 的 后 边 加 上 代码 “</marquee>”,， 如 | 


全 8.3.2 课堂 练 一 练 一 一 制作 自动 关闭 网 页 
下 面 制 作 应 用 JavaScript 函 数 实现 关闭 网 页 窗口 功能 ， 效 果 如 图 8-30 所 示 ， 具 体 的 操作 步骤 
如 下 。 
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<script language="javascript"> 
jy 
function clock() {i=i-1 
document .title=" 本 窗口 将 在 "+i+" 秒 后 自动 关闭 !"; 
if(i>0)settimeout ("clock();",1000); 
else self.close();} 
var i=10 
clock(); 
二 
| </script> 
: 回 打开 代码 视图 ， 在 <head> 和 </head> 之 间 输 
| 入 以 下 代码 ， 如 图 8-52 所 示 。 


DW zn mn WW 0 sm Wa) So wan BDIW WR ET 


ETE 3 


图 8-50 应 用 JavaScript 函 数 实现 窗口 关闭 效果 
原始 文件 :原始 文件 /CH08/8.3.2/index.html 

最 终 文件 : 最 终 文件 /CH08/8.3.2/indexl.html 

加 打开 网 页 文档 如 图 8-51 所 示 。 


图 8- 52 输入 代码 


加 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 
: 如 图 8-50 所 示 。 


图 8-51 打开 网 页 文档 


3 4 课 后 练习 
@ 
填空 题 


1. 在 Dreamweaver 中 ， 行 为 是 和 的 组 合 。 是 特定 的 时 间或 是 用 户 在 某 

时 所 发 出 的 指令 后 紧 接着 发 生 的 ， 而 是 事件 发 生 后 ， 网 页 所 要 做 出 的 反应 。 

2. 使 用 动作 在 打开 当前 网 页 的 同时 ， 还 可 以 再 打开 一 个 新 的 窗口 。 

二 、 操 作 题 
1. 给 图 8-53 所 示 的 网 页 创建 弹出 提示 信息 效果 ， 如 图 8-54 所 示 。 
原始 文件 : 原始 文件 /CH08/ 操 作 题 1/index.html 
最 终 文件 :最终 文 件 /CHO08/ 操 作 题 1/index1.html 
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图 8-53 ”起 始 文件 图 8-54 弹出 提示 信息 效果 
国 单 击 “ 行 为 ”面板 中 的 “添加 行为 ”按钮 和， 在 弹出 的 菜单 中 选择 “弹出 提示 信息 ”命令 ， 
弹出 “弹出 信息 ”对 话 框 ， 在 对 话 框 中 的 “消息 ”文本 框 中 输入 “您 好 ， 欢 迎 光临 我 们 的 网 
站 ! ”， 如 图 8-55 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 将 行为 添加 到 “行为 ”面板 中 ， 如 图 8-56 所 示 。 
行为 


图 8-55 “弹出 信息 ”对 话 框 图 8-56 添加 到 “行为 ”面板 
2. 给 图 8-57 所 示 的 网 页 创建 打开 浏览 器 窗口 网 页 的 效果 ， 如 图 8-58 所 示 。 
原始 文件 : 原始 文件 /CH08/ 操 作 题 2/index.html 
最 终 文件 : 最 终 文件 /CHO8/ 操 作 题 2/indexl html 
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图 8-57 起 始 文件 图 8-58 ”打开 浏览 器 窗口 效果 

打开 网 页 文档 ， 执 行 “窗口 ” |“ 行为 ”命令 。 

单 击 文档 窗口 中 的 <body> 标 签 ， 打 开 “ 行 为 ”面板 ， 在 “行为 ”面板 中 单 击 “ 添 加 行为 ”按钮 
昼 ， 在 弹出 的 菜单 中 选择 “打开 浏览 器 窗口 ”选项 。 

选中 选项 后 ， 弹 出 “打开 浏览 器 窗口 ”对 话 框 ， 如 图 8-59 所 示 。 

园 在 对 话 框 中 单 击 “ 要 显示 的 URL” 文 本 框 右边 的 “浏览 ”按钮 ， 弹 出 “选择 文件 ”对 话 框 ， 在 对 
话 框 中 选择 tujpg， 如 图 8-60 所 示 。 


人 
CW CHo8 ， 二 是 2 ，images 本 


Er 
SnapLgif topljpg 
要 8 的 UL 
窗口 宽度 窗口 珊 度 : 
属性 :站 导航 工具 栏 加 荣 单 条 
器 LI 日 需要 时 使 用 浓 动 条 
口交 回调 吾 大 手柄 
证 口 名 称 


筷 wz 

避 Toos OY 

Ea DATA(E) 
-RacKIpIFI ~ 


己 本 七 
Cm] i 
Cw 


图 8-59 “打开 浏览 器 窗口 ”对 话 框 图 8-60 “< 选择 文件 对 话 框 
国 单 击 “确定 ”按钮 ， 添 加 到 文本 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 8-61 所 示 。 
国 单 击 “ 确 定 ” 按 钮 ， 将 行为 添加 到 “行为 ”面板 中 ， 如 图 8-62 所 示 。 


Dw zen may es WA eam wo) 0 ey CI we 


URL: inages/tu. jog 


窗口 宽度 : 350 盏 口 高 度 - 39 中 
日 菜单 条 


日 需要 时 使 用 滚动 条 
调整 大 小 手柄 


图 8-61 “打开 浏览 器 窗口 ”对 话 框 图 8-62 添加 行为 
135 
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本 章 中 主要 讲解 了 “行为 ”的 基本 概念 ， 以 及 Dreamweaver 内 置 的 
“行为 ”的 操作 方法 。 对 于 “行为 ”本 身 ， 读 者 在 使 用 时 一 定 要 注意 确保 合理 和 恰当 ， 并 且 一 
个 网 页 中 不 要 使 用 过 多 的 “行为 ”。 只 有 这 样 ， 设 计 才 能 够 得 到 事半功倍 的 效果 。 
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本 章 导 读 
在 网 站 中 ， 表 单 是 实现 网 页 上 数据 传输 的 
基础 ， 其 作用 就 是 实现 访问 者 与 网 站 之 间 的 交互 
功能 。 利 用 表单 ， 可 以 根据 访问 者 输入 的 信息 ， 
自动 生成 页 面 反馈 给 访问 者 ， 还 可 以 为 网 站 收集 
访问 者 输入 的 信息 。 表 单 可 以 包含 允许 进行 交互 
的 各 种 对 象 ， 包 括 文本 域 、 列 表 框 、 复 选 框 、 单 
选 按钮 、 图 像 域 、 按 钮 及 其 他 表单 对 象 。 本 章 就 
来 讲述 表单 对 象 的 使 用 和 表单 网 页 的 常见 技巧 。 


技术 要 点 
了 解 表单 概述 
掌握 插入 输入 类 表单 对 象 
掌握 制作 网 站 注册 页 面 
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用 9.1.1 关于 表单 

表单 是 由 窗 体 和 控件 组 成 的 ， 一 个 表单 一 般 应 该 包含 用 户 填写 信息 的 输入 框 、 提 交 和 按钮 
等 ， 这 些 输入 框 和 按钮 称 为 控件 ， 表 单 很 像 容 器 ， 它 能 够 容纳 各 种 各 样 的 控件 。 

一 个 完整 的 表单 设计 应 该 很 明确 地 分 为 两 个 部 分 : 表单 对 象 部 分 和 应 用 程序 部 分 ， 它 们 
分 别 由 网 页 设计 师 和 程序 设计 师 来 设计 完成 。 其 过 程 是 这 样 的 ， 首 先 由 网 页 设计 师 制作 出 一 个 
可 以 让 浏览 者 输入 各 项 资料 的 表单 页 面 ， 这 部 分 属于 在 显示 器 上 可 以 看 得 到 的 内 容 ， 此 时 的 表 
单 只 是 一 个 外 壳 而 已 ， 不 具有 真正 工作 的 能 力 ， 需 要 后 人 台 程 序 的 支持 。 接 着 由 程序 设计 师 通 过 
ASP 或 者 CGI 程序 ， 来 编写 处 理 各 项 表单 资料 和 反馈 信息 等 操作 所 需 的 程序 ， 这 部 分 浏览 者 虽 
然 看 不 见 ， 但 却 是 表单 处 理 的 核心 。 


咱 9.1.2 ”表单 元 素 介绍 
Dreamweaver 作 为 一 种 可 视 化 的 网 页 设计 软件 ， 现 在 我 们 学 习 它 的 表单 ， 只 需 学 习 到 表单 

在 页 面 中 的 界面 设计 这 部 分 即 可 ， 至 于 后 续 的 程序 处 理 部 分 ， 还 是 交 给 专门 的 程序 设计 师 吧 。 
表单 用 <form></form> 标 记 来 创建 ， 在 <form></form> 标 记 之 间 的 部 分 都 属于 表单 的 内 容 。 

<form> 标 记 具 有 action、method 和 target 属 性 。 

友 action 的 值 是 处 理 程序 的 程序 名 ， 如 <form action="URL ">， 如 果 这 个 属性 是 空 值 ("") ， 
则 当前 文档 的 URL 将 被 使 用 ， 当 用 户 提交 表单 时 ， 服 务 器 将 执行 这 个 程序 。 

太 imethod 属 性 用 来 定义 处 理 程序 从 表单 中 获得 信息 的 方式 ， 可 取 GET 或 POST 中 的 一 个 。GET 
方式 是 处 理 程序 从 当前 html 文 档 中 获取 数据 ， 这 种 方式 传送 的 数据 量 是 有 所 限制 的 ， 一 般 
限制 在 IKB (255 字 节 ) 以 下 。POSTI 方 式 传送 的 数据 比较 大 ， 它 是 当前 的 htm] 文 档 把 数据 
传送 给 处 理 程序 ， 传 送 的 数据 量 要 比 使 用 GET 方 式 的 大 得 多 。 

友 target 属 性 用 来 指定 目标 窗口 或 目标 帧 。 


插入 输入 类 表单 对 象 


@ 可 以 使 用 Dreamweaver 创 建 带 有 文本 域 、 密 码 域 、 单 选 按钮 、 复 选 
框 、 选 择 、 按 钮 ， 以 及 其 他 输入 类 型 的 表单 ， 这 些 输入 类 型 又 被 称 为 表单 对 象 。 


虽 9.2.1 课堂 小 实例 一 一 插入 表单 域 

使 用 表单 必须 具备 的 条 件 有 两 个 一 个 是 含有 表单 元 素 的 网 页 文档 ， 另 一 个 是 具备 服务 器 
端的 表单 处 理应 用 程序 或 客户 端 脚本 程序 ， 它 能 够 处 理 用 户 输入 到 表单 的 信息 。 下 面 创建 一 个 
基本 的 表单 ， 具 体操 作 步 骤 如 下 。 
国 启动 Dreamweaver CC， 打 开 网 页 文档 ， 如 图 9-1 所 示 。 将 光标 置 于 文档 中 要 插入 表单 的 位 置 。 
园 执行 “插入 ”| “表单 ”| “表单 ”命令 ， 如 图 9-? 所 示 。 
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图 9-1 打开 网 页 文档 


图 9-2 执行 < 表单” 命令 


国 执行 命令 后 ， 页 面 中 就 会 出 现 红色 的 虚线 ， 这 虚线 就 是 表单 ， 如 图 9-3 所 示 。 


园 选中 表单 ， 在 “属性 ”面板 中 ， 设 置 表单 的 属性 ， 如 


图 9-4 所 示 。 
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图 9-4 表单 的 属性 面板 


在 表单 的 “属性 ”面板 中 可 以 设置 以 下 参数 。 | ”内 的 数据 。 


Form ID: 输入 标识 该 表单 的 唯一 名 称 。 


GET: 将 表单 内 的 数据 附加 到 URL 后 面 传送 给 


Action; 指定 处 理 该 表单 的 动态 页 或 脚本 ; 服务 器 ， 服务 器 用 读 取 环境 变量 的 方式 读 取 表单 内 


的 路 径 。 可 以 在 “动作 ”文本 框 中 输入 完 。; ”的 数据 。 


整 的 路 径 ， 也 可 以 单 击 文件 夹 图 标 浏览 应 


Method: 用 浏览 器 默认 的 方式 ， 一 般 默 认为 


用 程序 。 如 果 读 者 并 没有 相关 程序 支持 的 “; GET。 


话 ， 也 可 以 使 用 E-Mail 的 方式 来 传输 表单 信 ; 让 

息 ， 这 种 方式 需要 在 “动作 ”文本 框 中 键 | 

入 “mailto: 电 子 邮 件 地 址 ”的 内 容 ， 比 如 

“mailto:jsxson(@sohu.com”， 表 示 提 交 的 信 

息 将 会 发 送 到 作者 的 邮箱 中 。 

Method: 在 Method 下 拉 列 表 中 ， 选 择 将 表单 

数据 传输 到 服务 器 的 传送 方式 ， 包 括 3 个 选 

项 。 读 者 可 以 选择 速度 快 但 携带 数据 量 小 的 

GET 方 法 ， 或 者 数据 量 大 的 POST 方法 。 一 般 

情况 下 应 该 使 用 POST 方法 ， 这 在 数据 保密 方 

面 也 有 好 处 。 

POST: 用 标准 输入 方式 将 表单 内 的 数据 传送 
给 服务 器 ， 服 务 器 用 读 取 标准 输入 的 方式 读 取 表单 


Enctype: 用 来 设置 发 送 数 据 的 MIME 编 码 类 
型 ,一般 情况 下 应 选择 “application/x- www- 
form-urlencoded”。 
Target: 使 用 “目标 ”下 拉 列 表 指 定 一 个 窗 
口 ， 这 个 窗口 中 显示 应 用 程序 或 者 脚本 程序 
将 表单 处 理 完成 后 所 显示 的 结果 。 
“_blank”: 反馈 网 页 将 在 新 开 窗口 里 打 
沽 5 
“ parent”: 反馈 网 页 将 在 副 窗口 里 打开 。 
“_self”: 反馈 网 页 将 在 原 窗口 里 打开 。 
“top”: 反馈 网 页 将 在 项 层 窗口 里 打开 。 
“Class”: 在 “类 ”下 拉 列 表 中 选择 要 定 
义 的 表单 样式 。 


课堂 实录 “ee 一 @ 
课堂 小 实例 一 一 插入 文本 域 2 


文本 域 接受 任何 类 型 的 字母 数字 输入 内 | 文本 域 ， 如 图 9-8 所 示 。 

容 。 文 本 域 主要 用 于 单行 信息 的 输入 ,创建 TE 

文本 域 的 具体 操作 步骤 如 下 。 

国 将 光标 置 于 表单 中 ， 执行“ 插入 ”| “表格 ” 命 
令 ， 弹 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 
数 ”设置 为 9，“ 列 ”设置 为 2， 如 图 9.5 所 示 。 


图 9-8 插入 文本 域 
园 选中 插入 的 文本 域 ， 打 开 属性 面板 ， 在 面板 
中 设置 文本 域 的 相关 属性 ， 如 图 9-9 所 示 。 
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图 9-5 “表格 ”对 话 
园 单 击 “ 确 定 ” 按 钮 ， 插 入 表格 ， 如 图 9-6 所 示 。 
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图 9-6 ”插入 表格 


将 光标 置 于 表格 的 第 1 行 第 1 列 单元 格 中 ， 输 
入 相应 的 文字 ， 如 图 9-7 所 示 。 


在 文本 域 属性 面板 中 主要 有 以 下 参数 。 

六 Name: 在 文本 框 中 为 该 文本 域 指定 一 个 名 
称 ， 每 个 文本 域 都 必须 有 一 个 唯一 的 名 称 。 

文本 域名 称 不 能 包含 空格 或 特殊 字符 ， 可 以 

使 用 字母 、 数 字 、 字 符 和 下 画 线 “ ”的 任意 
合 。 所 选 名 称 最 好 与 输入 的 信息 有 关系 。 

友 size: 设置 文本 域 可 显示 的 字符 宽度 。 

六 MaxLength: 设置 单行 文本 域 中 最 多 可 输入 的 
字符 数 。 使 用 “最 多 字符 数 ” 将 邮政 编码 限 
制 为 6 位 数 ， 将 密码 限制 为 10 个 字符 等 。 如 果 
将 “最 多 字符 数 ” 文 本 框 保留 为 空白 ， 则 可 
以 输入 任意 数量 的 文本 ， 如 果 文 本 超过 字符 
宽度 ， 文 本 将 滚动 显示 。 如 果 输 入 超过 最 大 
字符 数 ， 则 表单 产生 警告 声 。 

克 pattem: 可 用 于 指定 JavaScript 正则 表达 式 模 

式 以 验证 输入 。 有 用 略 前 导 斜 杠 和 结尾 儿 杠 。 

List: 可 用 于 编辑 属性 检查 器 中 未 列 出 的 属性 。 


图 9-7 输入 文字 
加 将 光标 置 于 表格 的 第 1 行 第 2 列 单元 格 中 ， 执 | 
行 “ 插 入 ”|“ 表 单 ”|“ 文 本 ”命令 ， 插 入 | 
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虽 9.2.3 ”课堂 小 实例 一 一 插入 密码 域 -6 
使 用 密码 域 输入 的 密码 及 其 他 信息 在 发 送 到 服务 器 时 并 未 进行 加 密 处 理 。 所 传输 的 数据 可 

能 会 以 字母 数字 文本 形式 被 截获 并 被 读 取 。 因 此 ， 始 终 应 对 要 确保 安全 的 数据 进行 加 密 。 创 建 

密码 域 的 具体 操作 步骤 如 下 。 

将 光标 置 于 表格 的 第 2 行 第 1 列 中 ， 输 入 相应 的 文字 ， 如 图 9-10 所 示 。 

将 光标 置 于 表格 的 第 2 行 第 2 列 单元 格 中 ， 执 行 “插入 ”|“ 表 单 ”|“ 密 码 ” 命 令 ， 插 入 密码 域 ， 
如 图 9-11 所 示 。 
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图 9-10 输入 文字 图 9-11 播 入 密码 域 


最 好 对 不 同 内 容 的 文本 域 进 行 不 同 数量 的 限制 ， 防 止 个 别 浏览 者 恶意 输入 大 量 数据 ， 维 护 系统 的 稳定 
性 。 如 用 户 名 可 以 设置 为 30 个 字符 ， 密 码 可 以 设置 为 20 个 字符 ， 邮 政 编码 可 以 设置 为 6 个 字符 等 。 


肯 9.2.4 课堂 小 实例 一 一 插入 多 行文 本 域 o 
如 果 希 望 创建 多 行文 本 域 ， 则 需要 使 用 文本 区 域 。 插 入 文本 区 域 的 具体 操作 步骤 如 下 。 

将 光标 置 于 第 8 行 第 1 列 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 9-12 所 示 。 

将 光标 置 于 第 8 行 第 2 列 中 ， 执 行 “ 插 入 ”| “表单”|“ 文 本 区 域 ”命令 ， 插 入 文本 区 域 ， 如 图 
9-13 所 示 。 


图 9-12 输入 相应 的 文字 图 9-13 插入 文本 区 域 
园 选中 插入 的 文本 区 域 ， 打 开 属性 面板 ， 在 面板 中 设置 其 属性 ， 如 图 9-14 所 示 。 


1 在 “表单 ”插入 栏 中 单 去 “文本 区 域 ”按钮 口 ， 可 插入 多 行文 本 域 。 I 
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入 文字 “爱好 : ”， 如 图 9-16 所 示 。 


图 9-14 文本 区 域 的 属性 面板 


‘ 和 : 图 9-16 输入 文字 
上 9.2.5 ”课堂 小 实例 一 一 捅 入 | 加 将 光标 置 于 表格 的 第 3 行 第 2 列 单元 格 中 ， 执 


隐藏 域 | 。 行 “插入 ”| “表单 ”| “ 复 选 框 " 命令 ， 插 
可 以 使 用 隐藏 域 存储 并 提交 非 用户 输 入 ; ”入 复 选 框 ， 如 图 9-17 所 示 。 
信息 ， 该 信息 对 用 户 而 言 是 隐藏 的 。 | 
将 光标 置 于 要 插入 隐藏 域 的 位 置 ， 执 行 | 
“插入 ”| “表单 ”| “隐藏 域 ”命令 ,插入 隐 | 
藏 域 ， 如 图 9-15 所 示 。 | 
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图 9-17 插入 复 选 框 


| 国 选中 复 选 框 ， 在 属性 面板 中 设置 复 选 框 的 必 
: 性 ， 如 图 9-18 所 示 。 


单 击 “ 表 单 ”插入 栏 中 的 “隐藏 域 ”按钮 =， 
也 可 以 插入 隐藏 域 。 


侦 9.2.6 课堂 小 实例 一 一 插入 

复 选 杠 允 许 用 户 在 一 组 选项 中 选择 多 个 | De 
选项 ， 每 个 复 选 框 都 是 独立 的 ， 所 以 必须 有 ; 国 将 光标 置 于 复 选 框 的 右边 ， 输 入 文字 “看 
一 个 唯一 的 名 称 。 插 入 复 选 框 的 具体 操作 步 ; 书 ”， 如 图 9-19 所 示 。 


又 如 下 。 | 固 将 光标 置 于 文字 的 右边 ， 插 入 其 他 的 复 选 
将 光标 置 于 表格 的 第 3 行 第 1 列 单元 格 中 ， 输 ; 。”” 框 ， 并 输入 相应 的 文字 ， 如 图 9-20 所 示 。 
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: 将 光标 置 于 第 4 行 第 2 列 单元 格 中 ， 执 行 “ 插 

i 入 ”| “表单 ”| “ 单 选 按 钮 ”命令 ,插入 单 
选 按钮 ， 如 图 9-22 所 示 。 


图 9-19 输入 文字 


DW zmn wn Ei EA gem mo a OW me 


| 图 9-22 ”插入 单 选 按钮 
| 国 选中 插入 的 单 选 按钮 ， 打 开 属性 面板 ， 在 属 
| ”性 面板 中 设置 相关 属性 ， 如 图 9-23 所 示 。 

| 园 将 光标 置 于 单 选 按钮 的 右边 ， 输 入 文字 
| “ 男 ”， 如 图 9-24 所 示 。 


IE 
图 9-20 插入 其 他 复 选 框 


旧 9.2.7 ”课堂 小 实例 一 一 插入 

单 选 按钮 只 允许 从 多 个 选项 中 选择 一 个 | 
选项 。 单 选 按钮 通常 成 组 地 使 用 ， 在 同一 个 | 
组 中 的 所 有 单 选 按钮 必须 具有 相同 的 名 称 。 ; 
插入 单 选 按钮 的 具体 操作 步 又 如 下 。 
园 将 光标 置 于 表格 的 第 4 行 第 1 列 单元 格 中 , 输 | 

入 文字 “性 别 : ”， 如 图 9-21 所 示 。 : 


[人 mm- Eh ollel¥] ! 
bese 


图 9-24 输入 文字 


| 固 按照 步 邓 2~4 的 方法 ， 插 入 第 二 个 单 选 按 
| 钮 ， 并 输入 文字 ， 如 图 9-25 所 示 。 


图 9-21 输入 文字 
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EE 刘 堂 六 录 。。 一 全 


图 9-25 插入 其 他 单 选 按钮 


四 9 .2.8 课堂 小 实例 一 插入 


选择 


选择 框 使 访问 者 可 以 从 列表 中 选择 一 


个 或 多 个 项 目 。 当 空间 有 限 ， 但 需要 显示 许 | 
多 项 目 时 ， 选 择 框 非常 有 用 。 如 果 想 要 对 返 | 
回 给 服务 器 的 值 予以 控制 ， 也 可 以 使 用 选择 ; 
框 。 选 择 框 与 文本 域 不 同 ， 在 文本 域 中 用 户 ; 


可 以 随心 所 欲 地 键入 任何 信息 ， 甚 至 包括 无 | 


效 的 数据 ， 而 使 用 选择 框 则 可 以 设置 某 个 菜 ，; 
单 返回 的 确切 值 。 具 体操 作 步 骤 如 下 。 


国 将 光标 置 于 表格 的 第 5 行 第 1 列 单元 格 中 , 输 ; 


入 文字 “年 龄 : 


DW Mn i WW WA WM Wo oll War OW wep 


”， 如 图 9-26 所 示 。 
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图 9-26 输入 文字 


将 光标 置 于 表格 的 第 5 行 第 2 列 单元 格 中 , 执 j 
行 “ 插 入 ”| “表单 ”| “选择 ”命令 ， 插 入 | 
| 


送 方式 ) ， 如 图 9-27 所 示 。 


选中 “选择 ”， 在 属性 面板 中 单 击 | 


世相 -按钮 ， 如 图 9-28 所 示 。 


2 国 9-28 单 去 出 表 值 ” 按 铬 


; 轩 弹出 “列表 值 ”对 话 框 ， 在 对 话 框 中 单 击 
内 按钮 添加 相应 的 内 容 ， 如 图 9-29 所 示 。 


下 
回国 
看 | 
邯 助 00) 
图 9-29 “列表 值 ” 对 话 框 


列表 / 莱 单 的 属性 面板 中 主要 有 以 下 参数 。 
Name: 在 其 文本 框 中 输入 列表 /菜单 的 名 称 。 
Size: 设 可 用 于 指定 要 在 列表 菜单 中 显示 的 
行 数 。 仅 当选 择 列表 类 型 时 才 可 用 。 


Selected: 可 用 于 指定 用 户 是 否 可 以 从 列表 中 
一 次 选择 多 个 选项 。 仅 当选 择 列表 类 型 时 才 
可 用 ® 

列表 值 : 单 击 此 按钮 [3 芒 赴 .， ]， 弹 出 “ 列 
表 值 ”对 话 框 ， 在 对 话 框 中 向 菜单 中 添加 莱 
单 选 项 。 


| 国 单 击 “ 确 定 ”按钮 ， 添 加 列表 值 ， 如 图 9-30 
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所 示 。 | 选中 插入 的 Url， 打 开 属 性 面板 ， 在 面板 中 
: 进行 相应 的 设置 ， 如 图 9-33 所 示 。 


这 ~ 人 广 本 | 
图 9-30 添加 列表 人 


上 9.2.9 课堂 小 实例 一 一 插入 
Url | 


创建 Url 的 具体 操作 步骤 如 下 。 | 
团 将 光标 置 于 表格 的 第 6 行 第 1 列 单元 格 中 , 输 | 
入 文字 “相关 页 面 ，”， 如 图 9-31 所 示 。 。 | 用 9.2.10 ”课堂 小 实例 一 一 插入 


文件 域 


| 可 以 创建 文件 域 ,文件 域 使 浏览 者 可 以 
| 选择 其 计算 机 上 的 文件 ， 如 字 处 理 文档 或 图 
| 像 文 件 ， 并 将 该 文件 上 传 到 服务 器 。 文 件 域 
| 的 外 观 与 文本 域 类 似 ， 只 是 文件 域 还 包含 一 
| 个 “浏览 ”按钮 。 浏 览 者 可 以 手动 输入 要 上 
| 传 的 文件 的 路 径 ， 也 可 以 使 用 “浏览 ”按钮 
| 定位 并 选择 该 文件 。 具 体操 作 步 又 如 下 。 
| 园 将 光标 置 于 表格 第 7 行 第 1 列 单元 格 中 ， 输 入 
图 9-31 输入 文字 | 文字 “上 传 图 片 ，”， 如 图 9-34 所 示 。 
园 将 光标 置 于 第 6 行 第 2 列 单元 格 中 ,执行 | [>= i 
“插入 ”| “表单 ”|“URL” 命令 ， 如 图 | . : 
9-32 所 示 。 | 志 加 


[7 - 
em De 


| 图 9-34 输入 文字 

| 回 将 光标 置 于 第 7 行 第 2 列 单元 格 中 ， 执 行 “ 插 
| 入 ”| “表单 ”| “文件 ”命令 ,插入 文件 
图 9-32 插入 Url | 域 ， 如 图 9-35 所 示 。 
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| 园 单 击 “ 确 定 ” 按 钮 ， 插 入 图 像 按钮 ， 如 图 


9-38 所 示 。 


图 9-35 ”插入 文件 域 


选中 插入 的 文件 域 ， 打 开展 性 面板 ， 在 面板 | 


中 进行 相应 的 设置 ， 如 图 9-36 所 示 。 


图 9-36 文件 域 的 属性 面板 


上 9.2.11 
图 像 按 钮 


在 Dreamweaver 中 ， 可 以 使 用 指定 的 图 像 
作为 按钮 。 如 果 使 用 图 像 来 执行 任务 而 不 是 | 
提交 数据 ， 则 需要 将 某 种 行为 附加 到 表单 对 ; 


象 上 。 创 建 图 像 按 钮 的 具体 操作 步骤 如 下 。 
园 将 光标 置 于 表格 的 第 9 行 第 2 列 单元 格 中 ， 执 
行 “ 插 入 ”|“ 表 单 ”|“ 图 像 按钮 ”命令 


! [Dw ssn a se Sq ee ee0) e510 San ECW me 


课堂 小 实例 一 一 插入 


| 9.2.12 
弹出 “选择 图 像 源 文件 ”对 话 框 ， 选 择 图 | 


ET 


| 园 选中 插入 的 图 像 按钮 ， 打 开 属性 面板 ， 在 面 


板 中 进行 相应 的 设置 ， 如 图 9-39 所 示 。 


Ea 


图 9-39 图 像 按钮 的 属性 面板 


课堂 小 实例 一 一 插入 


2 


按钮 
按钮 控制 表单 操作 ， 使 用 表单 按钮 ， 可 


| 以 将 输入 表单 的 数据 提交 到 服务 器 ， 或 者 重 
| 置 该 表单 。 


对 表单 而 言 ， 按 钮 是 非常 重要 的 ， 它 


| 能 够 控制 对 表单 内 容 的 操作 ， 如 “提交 ”或 


“ 重 置 ”。 要 将 表单 内 容 发 送 到 远 端 服务 器 


| 上， 使 用 “提交 ”按钮 ， 要 清除 现 有 的 表单 
| 内容， 使 用 “ 重 置 ”按钮 。 插 入 按钮 的 具体 
| 操作 步骤 如 下 。 
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团 将 光标 置 于 表格 的 第 9 行 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”| “表单 ”| “提交 按 钮 ”命令 ， 插 入 提交 
按钮 ， 如 图 9-40 所 示 。 
园 选中 插入 的 按钮 ， 打 开 属性 面板 ， 在 面板 中 可 以 设置 相关 属性 ， 如 图 9-41 所 示 。 
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图 9-40 插入 提交 按钮 图 9-41 提交 按钮 的 属性 面板 


( 指 司 过 请 


将 光标 置 于 提交 按钮 右边 ， 执 行 “ 插 入 ”|“ 表 单 ”|“ 重 置 按 钮 ”命令 ， 插 入 重 置 按 钮 ， 并 在 属 
性 面板 中 设置 相关 属性 ， 如 图 9-42 所 示 。 
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图 9-42 插入 “ 重 置 ”按钮 
回 保存 文档 ， 完 成 表单 对 象 的 制作 。 
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川 9.3 ”实战 应 用 一 一 制作 网 站 注册 页 面 - © 
表单 是 网 站 的 管理 者 与 访问 者 进行 交互 的 重要 工具 ， 一 个 没有 表单 的 页 面 传递 信息 的 能 力 
是 有 限 的 ， 所 以 表单 经 常用 来 制作 用 户 登录 、 会 员 注册 及 信息 调查 等 页 面 。 
在 实际 中 ， 这 些 表单 对 象 很 少 单独 使 用 ， 一 般 一 个 表单 中 会 有 各 种 类 型 的 表单 对 象 ， 以 便于 
浏览 者 对 不 同类 型 的 问题 做 出 最 方便 、 快 捷 的 回答 。 因 此 ， 在 这 一 节 中 ， 我 们 将 会 带 着 读者 ,一 
步 一 步 亲 手 制作 一 个 完整 的 电子 邮件 表单 ， 效 果 如 图 9-43 所 示 ， 具 体 的 操作 步骤 如 下 。 
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原始 文件 : 原始 文件 /CH09/9.3/index.htm 
最 终 文件 : 最 终 文件 /CH09/9.3/index1.htm 


| 将 光标 置 于 表单 中 ， 执 行 “插入 ”|“ 表 格 ” 
命令 ， 插 入 7 行 2 列 的 表格 ， 如 图 9-46 所 示 。 
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园 将 光标 置 于 表格 的 第 1 行 第 1 列 单 元 格 中 ， 输 
入 相应 的 文字 ， 如 图 9-47 所 示 。 


图 9-43 ”电子 邮件 表单 效果 


打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 如 图 
9-44 所 示 。 
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图 9-47 输入 文字 
将 光标 置 于 表格 的 第 1 行 第 ? 列 单元 格 中 ， 执 
行 vs | “表单 ” | * 命令 ， 插入 
文本 域 ， 如 图 9-48 所 示 。 


[EC 


9-44 打开 网 页 文档 rh 
园 执行 “插入 ”| “表单 ”| “表单 ”命令 ， 插 $e 
入 表单 ， 如 图 9-45 所 示 。 
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图 9-48 插入 文本 域 

园 将 光标 置 于 表格 的 第 2 行 第 1 列 单元 格 中 ， 输 
入 相应 的 文字 ， 如 图 9-49 所 示 。 

: 将 光标 置 于 表格 的 第 2 行 第 2 列 单元 格 中 ， 执 


图 9-45 插入 表单 


@_。。 第 9 章 


行 “ 插 入 ”| “表单 ”|“Tel” 命 令 ， 插 入 Tel 域 ， 如 图 9-50 所 示 。 


图 9-49 输入 文字 图 9-50 插入 
园 将 光标 置 于 表格 的 第 3 行 第 1 列 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 9-51 所 示 。 


国 将 光标 置 于 表格 的 第 3 行 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 单 ”|“ 单 选 按钮 ”命令 ， 插 入 单 先 
按钮 ， 如 图 9-52 所 示 。 
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图 9-51 输入 文字 图 9-52 ”插入 单 选 按 钮 


将 光标 置 于 单 选 按钮 的 右边 ， 输 入 相应 的 文字 ， 如 图 9-53 所 示 。 
将 光标 置 于 文字 的 右边 ， 插 入 其 他 单 选 按钮 ， 并 输入 相应 的 文字 ， 如 图 9-54 所 示 。 
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图 9-53 输入 文字 图 9-54 插入 单 选 按 钮 
将 光标 置 于 表格 的 第 4 行 第 1 列 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 9-55 所 示 。 
将 光标 置 于 表格 的 第 4 行 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 单 ”|“ 复 选 框 ”命令 ， 插 入 复 选 
框 ， 如 图 9-56 所 示 。 
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图 9-56 插入 复 选 杠 
将 光标 置 于 复 选 框 的 右边 ， 输 入 相应 的 文字 ， 如 图 9-57 所 示 。 
将 光标 置 于 文字 的 右边 ， 插 入 其 他 的 复 选 框 ， 并 输入 相应 的 文字 ， 如 图 9-58 所 示 。 


图 9-57 输入 文字 图 9-58 ”插入 其 他 复 选 框 
将 光标 置 于 表格 的 第 5 行 第 1 列 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 9-59 所 示 。 
将 光标 置 于 表格 的 第 5 行 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 单 ”|“ 选 择 ” 命 令 ， 插 入 “ 选 
择 ”， 如 图 9-60 所 示 。 


图 9-59 输入 文字 站 图 9-60 ”插入 选择 


选择 插入 的 “选择 ”， 打 开 属 性 面板 ， 在 面板 中 单 击 “ 列 表 值 ”按钮 ， 打 开 “ 列 表 值 ”对 话 
框 ， 在 对 话 框 中 添加 列表 值 ， 如 图 9-61 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 添 加 列表 值 ， 如 图 9-62 所 示 。 
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图 9-61 “列表 鸽 ” 对话 杠 。 图 9-62 添加 列表 值 
将 光标 置 于 表格 的 第 6 行 第 1 列 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 9-63 所 示 。 
将 光标 置 于 表格 的 第 6 行 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”| “表单 ”| “文本 区 域 ”命令 ， 插 入 文本 
区 域 ， 如 图 9-64 所 示 。 


9 天 TE TM 


D mE © BE ME OPE 吕 
区 

| 

| 四 WR， 硬 却 到 加 


(De 


- 图 9-63 输入 文字 图 9-64 ”插入 文本 区 域 

将 光标 置 于 表格 的 第 7 行 第 2 列 单元 格 中 ， 执 行 “插入 ”| “表单 ”| “提交 按钮 ”命令 ， 插 入 “ 提 
交 ” 按 钮 ， 如 图 9-65 所 示 。 

将 光标 置 于 提交 按钮 的 右边 ， 执 行 “ 插 入 ”| “表单 ”| “ 重 置 按钮 ” 命令， 插入 “ 重 置 ”按钮 ， 
并 在 属性 面板 中 设置 相关 属性 ， 如 图 9-66 所 示 。 
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图 9-65 插入 “提交 按钮 | 图 9-66 插入 “ 重 置 ”按钮 
国 保存 文档 ， 完 成 表单 对 象 的 制作 ， 效 果 如 图 9-43 所 示 。 
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一 、 填 空 题 
Pd oA 总 
及 其 他 输入 类 型 的 表单 ， 这 些 输入 类型 又 被 称 为 表单 对 旬 。 
(2) 允许 用 户 在 一 组 选项 中 选择 多 个 选项 ， 每 个 都 是 独立 的 ， 所 以 
必须 有 一 个 唯一 的 名 称 。 
二 、 操 作 题 
制作 一 个 图 9-67 所 示 的 表单 网 页 。 


Rn 
有。 参考 93 节 创建 表单 。 


| 
原始 文件 : \ 原 始 文件 /CH09/ 操 作 题 /index.html 
最 终 文件 : \ 最 终 文件 /CH09/ 操 作 题 /indexl.html 


图 9-67 表单 网 页 


9 5 EE 


在 网 站 中 ， 表 单 是 实现 网 页 上 数据 传输 的 基础 ， 其 作用 就 是 实现 访问 
者 与 网 站 之 间 的 交互 功能 。 利 用 表单 ， 可 以 根据 访问 者 输入 的 信息 ， 自 动 生成 页 面 反 馈 给 访问 
者 ， 还 可 以 为 网 站 收集 访问 者 输入 的 信息 。 表 单 可 以 包含 允许 进行 交互 的 各 种 对 象 ， 包 括 文本 
域 、 选 择 、 复 选 框 、 单 选 按钮 、 图 像 域 、 按 钮 ， 以 及 其 他 表单 对 象 。 本 章 主 要 讲述 表单 的 使 用 。 
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第 10 章 
HTMLS 人 门 基础 


本 章 导读 
HTML5 是 一 种 网 络 标准 ， 相 比 现 有 的 


HTML4.01 和 XHTML 1.0， 可 以 实现 更 强 的 页 面 
表现 性 能 ， 同 时 充分 调用 本 地 的 资源 ， 实 现 不 输 
于 App 的 功能 效果 。HTML5 带 给 了 浏览 者 更 好 的 
视觉 冲击 ， 同 时 让 网 站 程序 员 更 好 地 与 HTML 语 言 
“沟通 ”。 虽 然 现 在 HTML5 还 没有 完善 ， 但 是 对 
于 以 后 的 网 站 建设 拥有 更 好 的 发 展 。 


技术 要 点 
认识 HTML5 
掌握 HTML5 与 HTML4 的 区 别 
掌握 HTML5 新 增 的 结构 元 素 
和 非 结构 元 素 
掌握 新 增 的 属性 和 废除 的 属性 
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| @ | 认识 HTML5 o 
@ 


HIML5S 的 发 展 越 来 越 迈 向 成 熟 ， 很 多 的 应 用 已 经 逐渐 出 现 
在 日 常生 活 中 了 ， 不 只 让 传统 网 站 上 的 互动 Flash 逐 渐 地 被 HTML5 的 技术 取代 ， 更 重要 的 是 可 
以 通过 HTML5 的 技术 来 开发 跨 平 台 的 手机 软件 ， 让 许多 开发 者 感到 十 分 兴奋 。 

HTML 最 早 是 作为 显示 文档 的 手段 出 现 的 。 再 加 上 JavaScript， 它 其 实 已 经 演变 成 了 一 个 系 
统 ， 可 以 开发 搜索 引擎 、 在 线 地 图 、 邮 件 阅 读 器 等 各 种 Web 应 用 。 虽 然 设计 巧妙 的 Web 应 用 可 
以 实现 很 多 令 人 赞叹 的 功能 ， 但 开发 这 样 的 应 用 远 非 易 事 。 多 数 都 得 手动 编写 大 量 JavaScript 代 
码 ， 还 要 用 到 JavaScript 工 具 包 ， 乃 至 在 Web 服 务 器 上 运行 的 服务 器 端 Web 应 用 。 要 让 所 有 这 些 
方面 在 不 同 的 浏览 器 中 都 能 紧密 配合 不 出 差错 是 一 个 挑战 。 由 于 各 大 浏览 器 厂商 的 内 核 标准 不 
一 样 ， 使 得 Web 前 端 开发 者 通常 在 兼容 性 问题 而 引起 的 bug 上 要 浪费 很 多 的 精力 。 

HTML5 是 2010 年 正式 推出 来 的 ， 随 便 就 引起 了 世界 上 各 大 浏览 器 开发 商 的 极 大 热情 ， 不 
管 是 Fire Fox、chrome、IE9 等 。 那 HTML5 为 什么 会 如 此 受 欢迎 呢 ? 

在 新 的 HTML5 语 法 规则 当中 ， 部 分 的 JavaScript 代 码 将 被 HTML5 的 新 属性 所 替代 ， 部 分 的 
DIV 的 布局 代码 也 将 被 HTML5 变 为 更 加 语义 化 的 结构 标签 ， 这 使 得 网 站 前 段 的 代码 变 得 更 加 精 
炼 、 简 洁 和 清晰 ， 让 代码 的 开发 者 也 更 加 一 目 了 然 代 码 所 要 表达 的 意思 。 

HTML5 是 一 种 设计 来 组 织 Web 内 容 的 语言 ， 其 目的 是 通过 创建 一 种 标准 的 和 直观 的 标记 语 
言 ， 来 把 Web 设 计 和 开发 变 得 容易 起 来 。HTML5 提 供 了 各 种 切割 和 划分 页 面 的 手段 ， 允 许 你 创 
建 的 切割 组 件 不 仅 能 用 来 逻辑 地 组 织 站 点 ， 而 且 能 够 赋予 网 站 聚合 的 能 力 。 这 是 HTML5 富 于 
表现 力 的 语义 和 实用 性 美学 的 基础 ，HIML5S 赋 予 设计 者 和 开发 者 各 种 层面 的 能 力 来 向 外 发 布 
各 式 各 样 的 内 容 ， 从 简单 的 文本 内 容 到 丰富 的 、 交 互 式 的 多 媒体 无 不 包括 在 内 。 图 10-1 所 示 为 
HTML5 技 术 用 来 实现 的 动画 特效 。 


图 10-1 HTML5 技 术 用 来 实现 动画 特效 


HTML5 提 供 了 高 效 的 数据 管理 、 绘 制 、 视 频 和 音频 工具 ， 其 促进 了 Web 上 的 和 便携 式 设备 
的 跨 浏览 器 应 用 的 开发 。HTML5 人 允许 更 大 的 灵活 性 ， 支 持 开发 非常 精彩 的 交互 式 网 站 。 其 还 
引入 了 新 的 标签 和 增强 性 的 功能 ， 其 中 包括 了 一 个 优雅 的 结构 、 表 单 的 控制 、API、 多 媒体 、 
数据 库 支持 和 显著 提升 的 处 理 速度 等 。 图 10-2 所 示 为 HTML5 制 作 的 游戏 。 
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图 10-2 HTML5 制 作 的 游戏 
HTML5 中 的 新 标签 都 是 高 度 关 联 的 ， 标 签 封装 了 它们 的 作用 和 用 法 。HTML 的 过 去 版 本 更 
多 地 是 使 用 非 描述 性 的 标签 ， 然 而 ，HTML5 拥 有 高 度 描 述 性 的 、 直 观 的 标签 ， 其 提供 了 丰富 
的 能 够 立刻 让 人 识别 出 内 容 的 内 容 标签 。 例 如 ， 被 频繁 使 用 的 <div> 标 签 已 经 有 了 两 个 增补 进 
来 的 <section> 和 <article> 标 签 。<video>、<audio>、<canvas> 和 <figure> 标 签 的 增加 也 提供 了 对 
特定 类 型 内 容 更 加 精确 的 描述 。 图 10-3 所 示 为 由 HIML5、CSS3 和 JS 代码 所 编写 的 美观 的 网 站 
全 界面 。 
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图 10-3 由 HTML5、CSS3 和 JS 编写 的 网 站 后 台 界 面 

HTML5 取 消 了 HTML4.01 的 一 部 分 被 CSS 取 代 的 标记 ， 提 供 了 新 的 元 素 和 属性 。 部 分 元 素 
对 于 搜索 引擎 能 够 更 好 地 索引 整理 ， 对 于 小 屏幕 的 设置 和 视 障 人 士 起 到 更 好 的 帮助 。HTML5 
还 采用 了 最 新 的 表单 的 输入 对 象 ， 还 引入 了 微 数据 ， 这 一 使 用 机 器 可 以 识别 的 标签 标注 内 容 的 
方法 ， 使 语义 Web 的 处 理 更 为 简单 。 


HTML5 是 最 新 的 HTML 标 准 ，HTML5 语 言 更 加 精简 ， 解 析 
的 规则 更 加 详细 。 re 的 浏览 器 ， 即 使 语法 错误 也 可 以 显示 出 同样 的 效果 。 下 面 列 出 的 
就 是 一 些 HTML4 和 HTML5 之 间 主 要 的 不 同 之 处 。 
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HTML 的 语法 是 在 SGML 语 言 的 基础 上 建立 起 来 的 。 但 是 SGML 语 法 非常 复杂 ， 要 开发 能 
够 解析 SGML 语 法 的 程序 也 很 不 容易 ， 所 以 很 多 浏览 器 都 不 包含 SGML 的 分 析 器 。 因 此 ， 虽 然 
HTML 基 本 遵从 SGML 的 语法 ， 但 是 对 于 HTML 的 执行 在 各 浏览 器 之 间 并 没有 一 个 统一 的 标准 。 

在 这 种 情况 下 ， 各 浏览 器 之 间 的 互 兼容 性 和 互 操作 性 在 很 大 程度 上 取决 于 网 站 或 网 络 应 用 
程序 的 开发 者 们 在 开发 上 所 做 的 共同 努力 ， 而 浏览 器 本 身 始终 是 存在 缺陷 的 。 

在 HTML5 中 提高 Web 浏 览 器 之 间 的 兼容 性 是 它 的 一 个 很 大 的 目标 ， 为 了 确保 兼容 性 ， 就 
要 有 一 个 统一 的 标准 。 因 此 ， 在 HTML5 中 ， 就 围绕 着 这 个 Web 标 准 ， 重 新 定义 了 一 套 在 现 有 的 
HTML 的 基础 上 修改 而 来 的 语法 ， 使 它 运行 在 各 浏览 器 时 各 浏览 器 都 能 够 符合 这 个 通用 标准 。 

因为 关于 HTML5 语 法 解析 的 算法 也 都 提供 了 详细 的 记载 ， 所 以 各 Web 浏 览 器 的 供应 商 们 
可 以 把 HTML5 分 析 器 集中 封装 在 自己 的 浏览 器 中 。 最 新 的 Firefox (默认 为 4.0 以 后 的 版 本 ) 与 
WebKit 浏 览 器 引擎 中 都 迅速 地 封装 了 供 HTML5 使 用 的 分 析 器 。 

器 10.2.2 HTML 5 中 的 标记 方法 一 一 一 一 一 一 一 一 一 一 一 一 0 

下 面 我 们 来 看 看 在 HTML5 中 的 标记 方法 。 

1. 内 容 类 型 (ContentType) 

HTML5 的 文件 扩展 符 与 内 容 类 型 保持 不 变 。 也 就 是 说 ， 扩 展 符 仍 然 为 “.HTML” 或 
“htm”， 内 容 类 型 (ContentType) 仍然 为 “text/HTML”。 

2. DOCTYPE 声 明 

DOCTYPE 声 明 是 HTML 文 件 中 必 不 可 少 的 ， 它 位 于 文件 第 一 行 。 在 HTML4 中 ， 它 的 声明 
方法 如 下 : 


DOCTYPE 声 明 是 HTML5 里 众多 新 特征 之 一 。 现 在 你 只 需要 写 <!IDOCTYPE HTML>， 这 就 
行 了 7。HTML5 中 的 DOCTYPE 声 明 方 法 不 区 分 大 小 写 ) 如 下 : 


3. 指定 字符 编码 
在 HTML4 中 ， 使 用 meta 元 素 的 形式 指定 文件 中 的 字符 编码 ， 如 下 所 示 : 


在 HTML 中 ， 可 以 使 用 对 元 素 直 接 追 加 charset 属 性 的 方式 来 指定 字符 编码 ， 如 下 所 示 : 


在 HTML5 中 这 两 种 方法 都 可 以 使 用 ， 但 是 不 能 同时 混合 使 用 两 种 方式 。 
上 虽 10.2.3 ”HTML 5 语法 中 的 3 个 要 点 一 一 一 一 一 一 一 一 一 一 一 0 
HTML5 中 规定 的 语法 ， 在 设计 上 兼顾 了 与 现 有 HTML 之 间 最 大 程度 的 兼容 性 。 下 面 就 来 看 
看 具体 的 HTML5 语 法 。 
1， 可 以 省 略 标签 的 元 素 
在 HTML5 中 ， 有 些 元 素 可 以 省 上 略 标签 ， 具体 来 讲 有 如 下 3 种 情况 。 
团 必须 写 明 结束 标签 。 
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、 
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source、track、wbr。 
可 以 省 略 结束 标签 。 

li、 dt、 dd、 p、 rt、 trp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、 了 h。 
可 以 省 略 整个 标签。 

HIML、head、body、colgroup、tbody。 

需要 注意 的 是 ， 虽 然 这 些 元 素 可 以 省 略 ， 但 实际 上 却 是 隐形 存在 的 。 

例如 : “<body>” 标 签 可 以 省 略 ， 但 在 DOM 树 上 它 是 存在 的 ， 可 以 永恒 访问 到 
“document.body” 。 
2. 取得 boolean 值 的 属性 

取得 布尔 值 (Boolean) 的 属性 ， 例 如 disabled 和 readonly 等 ， 通 过 默认 属性 的 值 来 表达 “ 值 
为 tue”。 
此 外 ， 在 写 明 属性 值 来 表达 “ 值 为 rue” 时 ， 可 以 将 属性 值 设 为 属性 名 称 本 身 ， 也 可 以 将 


值 设 为 空 字 符 串 。 


3 省略 属性 的 引用 符 

在 HTML4 中 设置 属性 值 时 ， 可 以 使 用 双 引 号 或 单 引号 来 引用 。 

在 HTML5 中 ， 只 要 属性 值 不 包含 空格 、“<”、“>”、“”、“"” 、“”、“=-” 等 字 
符 ， 都 可 以 省 略 属性 的 引用 符 。 

实例 如 下 : 


用 10.2.4 HTML5 与 HTML4 在 搜索 引擎 优化 上 的 对 比 
随 着 HTML5 的 到 来 ， 传 统 的 <div id="header"> 和 <div id="footer"> 无 处 不 在 的 代码 方法 现在 
即将 变 成 自己 的 标签 ， 如 <Header> 和 <footer>。 
图 10-4 所 示 为 传统 的 DIV+CSS 写 法 ， 图 10-5 所 示 为 HTML5 的 写法 。 


图 10-4 传统 的 DIV+CSS 写 法 图 10-5 HTML5 的 写法 
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从 图 10-4 和 图 10-5 可 以 看 出 HTML5 的 代码 可 读 性 更 高 了 ， 也 更 简洁 了 ， 内 容 的 组 织 相同 ， 
但 每 个 元 素 有 一 个 明确 的 清晰 的 定义 ， 搜 索引 擎 也 可 以 更 容易 地 抓 取 网 页 上 的 内 容 。HTML5 
标准 对 于 SEO 有 什么 优势 呢 ? 
1. 使 搜索 引擎 更 加 容易 抓 去 和 索引 

对 于 一 些 网 站 ， 特 别 是 那些 严重 依赖 于 Flash 的 网 站 ，HTML5 是 一 个 大 福音 。 如 果 整 个 网 
站 都 是 Flash 的 ， 就 一 定 会 看 到 转换 成 HIML5 的 好 处 。 首 先 ， 搜 索引 擎 的 蜘蛛 将 能 够 抓 取 站 点 
内 容 。 所 有 访 入 到 动画 中 的 内 容 将 全 部 可 以 被 搜索 引擎 读 取 。 
2. 提供 更 多 的 功能 

使 用 HTML5 的 另 一 个 好 处 就 是 它 可 以 增加 更 多 的 功能 。 对 于 HTML5 的 功能 性 问题 ， 我 们 
可 以 从 全 球 几 个 主流 站 点 对 它 的 青睐 就 可 以 看 出 。 社 交 网 络 大 亭 Facebook 已 经 推出 他 们 期 待 已 
久 的 基于 HTML5 的 iPad 应 用 平台 ， 每 天 都 有 不 断 的 基于 HTML5 的 网 站 和 HTML5 特 性 的 网 站 被 
推出 。 保持 站 点 处 于 新 技术 的 前 沿 ， 也 可 以 很 好 地 提高 用 户 的 友好 体验 。 
3.， 可 用 性 的 提高 ， 提 高 用 户 的 友好 体验 

最 后 我 们 可 以 从 可 用 性 的 角度 上 看 ，HTML5 可 以 更 好 地 促进 用 户 于 网 站 间 的 互动 情况 。 
多 媒体 网 站 可 以 获得 更 多 的 改进 ， 特 别 是 在 移动 平台 上 的 应 用 ， 使 用 HTML5 可 以 提供 更 多 高 
质量 的 视频 和 音频 流 。 


10. 6h 新 增 的 主体 结构 元 素 


在 HTML 5 中 ， 为 了 使 文档 的 结构 更 加 清晰 明确 ， 容 易 阅 
读 ， 增 加 了 很 多 新 的 结构 元 素 ， 如 页 眉 、 页 脚 、 内 容 区 块 等 结构 元 素 。 


器 10.3.1 课堂 练 一 练 一 一 article 元 素 


article 元 素 可 以 灵活 使 用 ，article 元 素 可 以 包含 独立 的 内 容 项 ， 所 以 可 以 包含 一 个 论坛 帖 
子 、 一 篇 杂志 文章 、 一 篇 博客 文章 、 用 户 评论 等 。 这 个 元 素 可 以 将 信息 各 部 分 进行 任意 分 组 ， 
而 不 论 信息 原来 的 性 质 。 

作为 文档 的 独立 部 分 ， 每 一 个 article 元 素 的 内 容 都 具有 独立 的 结构 。 为 了 定义 这 个 结构 ， 
可 以 利用 前 面 介 绍 的 <header> 和 <footer> 标 签 的 丰富 功能 。 它 们 不 仅仅 能 够 用 在 正文 中 ， 也 能 够 
用 于 文档 的 各 个 节 中 。 

下 面 以 一 篇 文章 讲述 article 元 素 的 使 用 ， 具 体 代码 如 下 。 
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在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 
在 hl 元 素 中 是 文章 的 标题 “不 能 改变 世界 ， 
就 要 改变 自己 去 适应 环境 ”， 文 章 的 发 表 日 
期 在 p 元 素 中 。 在 标题 下 部 的 p 元 素 中 是 文章 
的 正文 ， 在 结尾 处 的 footer 元 素 中 是 文章 的 版 
权 。 对 这 部 分 内 容 使 用 了 article 元 素 。 在 浏览 
器 中 效果 如 图 10-6 所 示 。 

另外 ，article 元 素 也 可 以 用 来 表示 插件 ， 它 
的 作用 是 使 插件 看 起 来 好 像 内 主 在 页 面 中 一 样 。 图 10-6 article 元 素 


DC Hinde om EE 加 


不 能 改变 世界 ， 就 要 改变 自己 去 适应 环境 
发 表 日 期 2014/07/09 


| 
a AA 


可 所 有 向 和 村 


一 个 网 页 中 可 能 有 多 个 独立 的 article 元 素 ， 每 一 个 article 元 素 都 允许 有 自己 的 标题 与 脚注 等 
从 属 元 素 ， 并 允许 对 自己 的 从 属 元 素 单独 使 用 样式 。 如 一 个 网 页 中 的 样式 可 能 如 下 所 示 : 


用 10.3.2 ”课堂 练 一 练 一 section 元 素 一 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。 一 个 section 元 素 通常 由 内 容 
及 其 标题 组 成 。 但 section 元 素 也 并 非 一 个 普通 的 容器 元 素 ， 当 一 个 容器 需要 被 重新 定义 样式 或 
者 定义 脚本 行为 的 时 候 ， 还 是 推荐 使 用 Div 控 制 。 


下 面 是 一 个 带 有 section 元 素 的 article 元 素 例子 。 
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从 上 面 的 代码 可 以 看 出 ， 首 页 整体 呈 | 
现 的 是 一 段 完整 独立 的 内 容 ， 所 以 我 们 要 用 ; 
article 元 素 包 起 来 ， 这 其 中 又 可 分 为 3 段 ， 每 
一 段 都 有 一 个 独立 的 标题 ， 使 用 了 两 个 section | 
| 较 独立 、 完 整 的 时 候 ， 应 该 使 用 article 元 素 ， 
| 但 是 如 果 想 将 一 块 内 容 分 成 几 段 的 时 候 ， 应 
| 该 使 用 section 元 素 。 


元 素 为 其 分 段 。 这 样 使 文档 的 结构 显得 清 
晰 。 在 浏览 器 中 效果 如 图 10-7 所 示 。 


rr rE 
Ee > 0 
ET TE 

水 果 


人 
、 优 肥 太 身 、 频 肤 辟 知 、 明 目 、 玉 太 、 降 低 且 国 芍 等 保健 作用 


简 葡 
7 
| 刁 子 


ee 


Nn 


图 10-7 带 有 seetion 元 素 的 article 元 素 实例 
article 元 素 和 section 元 素 有 什么 区 别 呢 ? 


在 HTML5 中 ，article 元 素 可 以 看 成 是 一 种 特 
殊 种 类 的 section 元 素 ， 它 比 section 元 素 更 强调 
独立 性 。 即 section 元 素 强 调 分 段 或 分 块 ， 而 
article 强 调 独立 性 。 如 果 一 块 内 容 相 对 来 说 比 


回 10.3.3 课堂 练 一 练 一 一 nav 元 素 一 一 一 一 一 一 一 一 一 一 一 0 
nav 元 素 在 HTML5 中 用 于 包 衰 一 个 导航 链接 组 ， 用 于 显 式 地 说 明 这 是 一 个 导航 组 ， 在 同一 
个 页 面 中 可 以 同时 存在 多 个 nav。 

并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 元 素 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 元 素 即 
可 。 例 如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 声 明 等 ， 这 时 使 用 footer 
元 素 是 最 恰当 的 。 

一 直 以 来 ， 习 惯 于 使 用 形 如 <div id="nav"> 或 <ul id="nav"> 这 样 的 代码 来 编写 页 面 的 导航 ， 
在 HTML5 中 ， 可 以 直接 将 导航 链接 列表 放 到 <nav> 标 签 中 : 
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导航 ， 顾 名 思 义 ， 就 是 引导 的 路 线 ， 那 么 具有 引导 功能 的 都 可 以 认为 是 导航 。 导 航 可 以 是 
页 与 页 之 间 导 航 ， 也 可 以 是 页 内 的 段 与 段 之 间 导 航 。 


这 个 实例 是 页 面 之 间 的 导航 ，nav 元 素 中 包含 了 3 个 用 于 导航 的 超级 链接 ， 即 “首页 ”、 
“关于 我 们 ”和 “在 线 论 坛 ”。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导航 。 
运行 代码 如 图 10-8 所 示 。 

下 而 的 实例 是 页 内 导航 ， 本 RR 


a NE | 
网 站 页 面 之 间 导 航 文章 的 标题 
"首页 本 : 星 
。 关于 我 人 a 
| 。 |a= 
|s= 
100% > | 或 100% 。 | 
图 10-8 页 面 之 间 导 航 图 10-9 页 内 导航 


nav 元 素 使 用 在 哪 行 位 置 呢 ? 
项 部 传统 导航 条 : 现在 主流 网 站 上 都 有 不 同 层级 的 导航 条 ， 其 作用 是 将 当前 画面 跳 转 到 网 
站 的 其 他 主要 页 面 上 去 。 图 10-10 所 示 为 项 部 传统 网 站 导航 条 。 
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| 面 几 个 主要 的 组 成 部 分 之 间 进行 跳 转 ， 如 图 
10-12 所 示 为 页 内 导航 。 


图 10-10 顶部 传统 网 站 导航 条 : 
侧 边 导航 : 现在 很 多 企业 网 站 和 购物 类 网 | 

站 上 都 有 侧 边 导 航 ， 图 10-11 所 示 为 左 侧 导航 。 
- rv 


于 一 下 加 再 人 并 的 和 省 品 贞 及时 力克 小 生 示 全 负电 和 岂 了 辐 由 
大” 这 一 宁可， 宇 证， 亲人 1 生产 如 由 及 RPR 
所作 入 攻 工人 本 由 的 册 有 东 ， 计 
两 ,SNR 济 ，- 计 一 续 一 基 - 全 ， 二 本 恒生 为 下 人 本 加 村 有 甩 优 和 四 和 下台 
A 


的 有 和 ， 押 0 购 下 业 而 区 ， 部 于 一 所 下面 
LA TT 
垦区 站 吉首 内 是 其 人 区 机， 且 洒 忆 是 一 个 夺 HR 提供 采 做 ao 最 
天 人 了 的 计 宁可 一 人 全 了 后 提 和 人 开 产品 记 和 好 请 避 ， 旺 因 和 
也 入， 人 人 taD 贡 HIE 入 29 ， 让 记 和 90 凤 更 开办 ， 月 更 体 唐 ， 
4 
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图 10-12 页 内 导航 


| 在 HTML 5 中 不 要 用 menu 元 素 代 替 nav 元 
| 素 。 过 去 有 很 多 Web 应 用 程序 的 开发 员 喜 欢 

图 10-11 左 侧 导 航 : menu 元 素 进行 导航 ，menu 元 素 是 用 在 Web 应 
页 内 导航 : 页 内 导航 的 作用 是 在 本 页 ; 用 程序 中 的 。 


用 10.3.4 课 堂 练 一 练 一 一 aside 元 素 
aside 元 素 用 来 表示 当前 页 面 或 文章 的 附 | ”其 中 的 内 容 可 以 是 友情 链接 、 文 章 列表 、 
属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 i; ”广告 单元 等 。 代 码 如 下 所 示 ， 运 行 代码 如 
内 容 相关 的 引用 、 侧 边栏 、 广 告 、 导 航 条 ， ; ”图 10-13 所 示 。 
以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 | 属 rr 
aside 元 素 主 要 有 以 下 两 种 使 用 方法 。 | 
(1) 包含 在 article 元 素 中 作为 主要 内 容 的 附属 : 
信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文章 ; 
有 关 的 参考 资料 、 名 词 解 释 等 。 : 
<article> 
<h1>..</h1> 


<p>-</p> 
<aside>.-</aside> 


图 10-13 aside 元 素 实例 
</article> | <aside> 

(2) 在 article 元 素 之 外 使 用 作为 页 面 或 站 点 全 | <h23 新 闻 资讯 2/h23 

局 的 附属 信息 部 分 。 最 典型 的 是 侧 边栏 ， | 性 sa 
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| 0U. 4 新 增 的 非 主体 结构 元 素 o 


除了 以 上 几 个 主要 的 结构 元 素 之 外 ，HTML5 内 还 增加 了 一 
些 表 示 逻 辑 结构 或 附加 信息 的 非 主体 结构 元 素 。 


旧 10.4.1 课堂 练 一 练 一 一 header 元 素 


header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 面 内 的 一 
个 内 容 区 块 的 标题 ，header 内 也 可 以 包含 其 他 内 容 ， 例 如 表格 、 表 单 或 相关 的 Logo 图 片 。 

在 架构 页 面 时 ， 整 个 页 面 的 标题 常 放 在 页 面 的 开头 ，header 标 签 一 般 都 放 在 页 面 的 项 部 。 
可 以 用 如 下 所 示 的 形式 书写 页 面 的 标题 : 


在 一 个 网 页 中 可 以 拥有 多 个 header 元 素 ， | 括 hgroup、nav 等 元 素 。 
可 以 为 每 个 内 容 区 块 加 一 个 header 元 素 。 : 下 面 是 一 个 网 页 中 的 header 元 素 使 用 实 
; 例 ， 运 行 代码 如 图 10-14 所 示 。 


一 
Hl 
! EBS Eames rr ones @p- ox 


mwLtcss 网 页 制作 与 布局 课堂 实录 
ee 的 二 全面 人 8 了 全 Rn 


书 特点 


:i 


在 HTML5 中 ， 一 个 header 元 素 通常 包括 | i 
至 少 一 个 headering 元 素 (hl-h6) ， 也 可 以 包 | 图 10-14 header 元 素 使 用 实例 


EEEIEEEETEE 讲堂 六 录 。。 一 个 


器 10.4.2 课堂 练 一 练 一 一 hgroup 元 素 一 一 一 一 一 一 一 一 一 一 0 
header 元 素 位 于 正文 开头 ， 可 以 在 这 些 ; 素 了 。 如 下 所 示 hgroup 元 素 实例 代码 ， 运 行 代 

元 素 中 添加 <h1> 标 签 ， 用 于 显示 标题 。 基 本 ; 码 如 图 10-15 所 示 。 

上 ，<h1> 标 签 已 经 足够 用 于 创建 文档 各 部 分 : 


| [DOE Fr" FX 
的 标题 行 。 但 是 ， 有 时 候 还 需要 添加 副标题 | SS ssn ix we | 
或 其 他 信息 ， 以 说 明 网 页 或 各 节 的 内 容 。 特色 小 吃 


hgroup 元 素 是 将 标题 及 其 子 标题 进行 分 | 天 津 钊 不 理 人 包子 
组 的 元 素 。 hgroup 元 素 通常 会 将 h1 一 h6 元 素 进 : ee 狗 不 理 包子 是 不 每 不 提 到 的 ， 独 了 pet 吉 打 中 
行 分 组 ， 一 个 内 容 区 块 的 标题 及 其 子 标题 算 | | 训 玉 信人 eg ara 人 a 
一 组 。 : Ee 9 如今， 莉 不 理 包子 已 二 由 世界 ， 齐 入 许 

| 

通常 ， 如 果 文章 只 有 一 个 主 标题 ， 是 不 ; 
需要 hgroup 元 素 的 。 但 是 ， 如 果 文章 有 主 标 | RE 
题 ， 主 标题 下 有 子 标题 ， 就 需要 使 用 hgroup 元 ; 图 10-15 ”hgroup 元 素 实例 


如 果 有 标题 和 副标题 ， 或 在 同一 个 <header> 元 素 中 加 入 多 个 旦 标题， 那么 就 需要 使 用 
<hgroup> 元 素 。 


时 10.4.3 ”课堂 练 一 练 一 一 footer 元 素 一 一 一 一 一 一 一 一 一 一 一 0 


footer 通 常 包括 其 相关 区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。footer 元 素 
和 header 元 素 使 用 基本 上 一 样 ， 可 以 在 一 个 页 面 中 使 用 多 次 ， 如 果 在 一 个 区 段 后 面 加 入 footer 元 
素 ， 那 么 它 就 相当 于 该 区 段 的 尾部 了 。 

在 HTML 5 出 现 之 前 ， 通 常 使 用 类 似 下 面 这 样 的 代码 来 写 页 面 的 页 脚 : 


@@ 。。 第 10 章 IEA 


| 中 如 下 所 示 。 

在 article 元 素 中 添加 footer 元 素 : 
在 HTML5 中 ， 可 以 不 使 用 div， a | 
语义 化 的 footer 来 写 : | 
后 二 


footer 元 素 即 可 以 用 作 页 面 整体 的 页 脚 ， 
也 可 以 作为 一 个 内 容 区 块 的 结尾 ， 例 如 可 以 | 
将 <footer> 直 接 写 在 <section> 或 是 <article> | 


虽 10.4.4 ”课堂 练 一 练 一 一 address 元 素 一 一 一 一 一 一 一 一 一 一 0 


address 元 素 通常 位 于 文档 的 未 尾 ，address 元 素 用 来 在 文档 中 呈现 联系 信息 ， 包 括 文档 创建 
者 的 名 字 、 站 点 链接 、 es 真实 地 址 、 电 话 号 码 等 。address 不 只 是 用 来 呈现 电子 邮箱 或 
真实 地 址 这 样 的 “地 址 ” ， 而 应 该 包括 与 文档 创建 人 相关 的 各 类 联系 方式 。 

下 而 是 wiiress 元 素 实例 。 


浏览 器 中 显示 地 址 的 方式 与 其 周围 的 文档 不 同 ，IE、Firefox 和 Safari 浏 览 器 以 斜体 显示 地 
址 ， 如 图 10-16 所 示 。 
还 可 以 把 footer 元 素 、time 元 素 与 address 元 素 结合 起 来 使 用 ， 具 体 代码 如 下 。 


ETETETTEE 识 党 实录 


~e—® 


在 这 个 示例 中 ， 把 文章 的 作者 信息 放 在 了 address 元 素 中 ， 把 文章 发 表 日 期 放 在 了 time 元 素 


中 ， 96 和 丰 天守 Het 素 中 的 癌 体 身 有 作为 加 往生 息 放 在 了 footer 元 素 中 。 NN 


Te 


[ER 


ime 元 车 亡 - CX Ee 


图 10-16 address 元 素 实例 


10.5 


HTML5 增 加 了 一 些 行内 语义 元 素 : 
mark、time、meter、progress。 
(1) mark: 定义 有 记号 的 文本 。 
(2) time: 定义 日 期 /时 间 。 
(3) meter: 定义 预定 义 范 围 内 的 度量 。 
(4) progress: 定义 运行 中 的 进度 。 


调 的 文本 。 


新 增 的 行 


mark 元 素 用 来 标记 一 些 不 是 特别 需要 强 ， 


| 可 以 代表 24 小 时 中 的 某 一 时 刻 ， 
| 时 ， 人 允许 有 了 时间差 。 在 设置 时 间或 日 期 时 ， 
;只 需 将 该 元 素 的 属性 datetime 设 为 相应 的 时 间 
| 或 日 期 即 可 。 

运行 代码 ， 在 浏览 器 中 浏览 ， 如 图 10-18 | 


图 10-17 footer 元 素 、time 元 素 与 address 元 素 结合 


内 的 语义 元 素 


i 所 示 ，<mark> 与 </mark> 标 签 之 间 的 文字 “和 牛 
| 奶 ”添加 了 记号 。 


| 
Er Pp-cxw | 


mart aml 
EpT-=3 
A MA EE WENN IA WAY 


今天 别 语 记 了 买 帮 病 . 


图 10-18 ”matk 元 素 实例 
time 元 素 用 于 定义 时 间或 日 期 。 该 元 素 
在 表示 时 刻 


实例 代码 : 


@ 。 第 10 章 WN 了 NRE 


<p> 元 素 ID 号 为 “p1” 中 的 <time> 元 素 ， 


表示 的 是 日 期 。 页 面 在 解析 时 ， 获 取 的 是 属 | 
性 datetime 中 的 值 ， 而 标记 之 间 的 内 容 只 是 用 ， 


于 显示 在 页 面 中 。 
<p> 元 素 ID 号 为 “p2” 中 的 <time> 元 素 ， 


表示 的 是 日 期 和 时 间 ， 它 们 之 间 使 用 字母 


“T” 进 行 分 隔 。 

<p> 元 素 ID 号 为 “p3” 中 的 <time> 元 素 ， 
表示 的 是 将 来 时 间 。 

<p> 元 素 ID 号 为 “p4” 中 的 <time> 元 素 ， 
表示 的 是 发 布 日 期 。 为 了 在 文档 中 将 这 两 个 


日 期 进行 区 分 ， 在 最 后 一 个 <time> 元 素 中 增 | 
， 展示 在 页 面 中 ， 展 示 的 方式 既 可 以 使 用 束 
运行 代码 ， 在 浏览 器 中 浏览 如 图 10-19 | 
| 10%~100%) 。 
下 面 通过 一 个 实例 介绍 progress 元 素 在 文件 下 载 时 的 使 用 。 


加 了 pubdate 属 性 ， 表 示 此 日 期 为 发 布 日 期 。 


所 示 。 


J Semen 日 

EE EE 
3 天 是 2014 征 4 有 810 
现在 时 间 是 2014 年 4 月 10 日 览 上 8 页 


公司 和 新 看 型 将 于 人 节 年 详 上 市 
本 丧生 家 布 于 2014 年 胡 1 日 


Ra 


图 10-19 time 元 素 实 例 
progress 是 HTML5 中 新 增 的 状态 交互 


元素， 用 来 表示 页 面 中 的 某 个 任务 完成 的 
| 进度 (进程 ) 。 例 如 下 载 文件 时 ， 文 件 下 


载 到 本 地 的 进度 值 ， 可 以 通过 该 元 素 动态 


数 〈 如 1 一 100) ， 也 可 以 使 用 百分比 (如 
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DEREIEEIETEE 识 党 实录 。。 一 个 


为 了 使 Progress 元 素 能 Gm 
动态 展示 下 载 进 度 ， 需 要 通 ue ， 国 5 Ruzs Mutmo ins 中 cooae > BR a RR Re» 
过 JavaScript 代 码 编写 一 个 ET 

定时 事件 。 在 该 事件 中 ， 本 
累加 变量 值 ， 并 将 该 值 设置 
为 progress 元 素 的 value 属 性 
值 ， 当 这 个 属性 值 大 于 或 等 
于 progress 元 素 的 max 属 性 
值 时 ， 则 停止 累加 ， 并 显示 
“下 载 完 成 ! ”的 字样 ; 否 


则 ， 动 态 显 示 正 在 累加 的 百 全 3 es 生硬 艺 站 二 本 1 
分 比 数 。 如 图 10-20 所 示 。 图 10-20 progress 元素 实例 


Meter 元 素 用 于 表示 在 一 定数 量 范围 中 的 值 ， 如 投票 中 ， 候 选 人 各 占 比 例 情 况 及 考试 分 数 
等 。 下 面 通过 一 个 实例 介绍 meter 元 素 在 展示 投票 结果 时 的 使 用 。 
实例 代码 : 


@ 。 第 10 章 OVEN 


候选 人 “ 李 明 ” 所 占 的 比 | 窜 图 © 3 @ fleyWDVHTML | pe -1 
例 是 百分制 中 的 60， 最 低 比 例 bus. ss mks AMT Binks DGeosle » Wr ”图 BR 全 Van 更 多 > 


[ 司 口 "=e 二 二 ~ + 
| 闪 有 100 人 痢 与 投票 ， 投 票 结果 如下: 

:on 
EM: Re To 


可 能 为 0， 但 实际 最 低 为 10; 
最 高 比例 可 能 为 100， 但 实际 
最 高 为 90， 如 图 10-21 所 示 。 


|@ 3 » Hemr 六 FE 生 果 下 玛 I 斋 癌 加 硬 100ox 


图 10-21 meter 元 素 实例 


| @ 新 增 的 input 元 素 的 类 型 
@ 


在 网 站 页 面 的 时 候 ， 难 免 会 碰 到 表单 的 开发 ， 用 户 输入 的 大 
部 分 内 容 都 是 在 表单 中 完成 提交 到 后 人 的。 在 HTML5 中 ， 也 提供 了 大 量 的 表单 功能 。 
在 HTML5 中 ， 对 input 元 素 进行 了 大 幅度 的 改进 ， 使 得 我 们 可 以 简单 地 使 用 这 些 新 增 的 元 
素来 实现 需要 JavaScript 来 实现 的 功能 。 
1. url 类 型 
input 元 素 里 的 url 类 型 是 一 种 专门 用 来 输入 url 地 址 的 文本 框 。 如 果 该 文本 框 中 内 容 不 是 url 
地 址 格式 的 文字 ， 则 不 允许 提交 。 例 如 : 
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CE 识 尝 实录 。。 一 全 


设置 此 类 型 后 ， 从 外 观 上 来 看 与 普通 的 元 素 差不多 ， 可 是 如 果 你 将 此 类 型 放 到 表单 中 
之 后 ， 当 单 击 “ 提 交 ” 按 钮 ， 如 果 此 输入 框 中 输入 的 不 是 一 个 URL 地 址 ， 将 无 法 提交 ， 如 图 


10-22 所 示 。 
250 入 53 Ft EE CR I WW | -DD x 
3 车 ] 匣 ] 靖 |[ 回 [Wey/DVHTML-CSS 品 页 SF 与 丰 且 诗 全 夫 孙 / 玖 率 /CHC 多 ||| 国 .起 此 按 示 ”|[ 忆 | 
久 4 莉 ”图 计 交 国 Rix 全 RP 加 Unks 门 Googe > ”六 DR ”更 冯 ” 
EE x 
orau 提交 ] 
| 加 请 输入 网 址 . 
-ed 加 WsN 生 果 下 载 四 名 站 加 加 100% 
图 10-22 ”url 类 型 实例 
2. email 类 型 


如 果 将 上 面 的 URL 类 型 的 代码 中 的 type 修 改 为 email， 那 么 在 表单 提交 的 时 候 ， 会 自动 验证 
此 输入 框 中 的 内 容 是 否 为 email 格 式 ， 如 果 不 是 ， 则 无 法 提交 。 代 码 如 下 : 


如 果 用 户 在 该 文本 框 中 输入 的 不 是 email 地 址 的 话 ， 则 会 提醒 不 允许 提交 ， 如 图 10-23 所 示 。 


3160 全 6.3 WE TR W|I -HD x 
SE 专 |[ 三 ] 会][ 国 [fey//D/WHTML+CSS 网 页 轴 作 与 市 Fv a 
名 tm ， 国 6R 国 Ritx 主 抽 D 国 Unks 口 cooole " mre BAR ss> 
| | 
DPIE 

| 加 请 输入 电子 郎 件 地 址 。 

入 = 南 丘 作 至 欢 二 jsEE 生 时 T 本 加 100% - 


图 10-23 email 类 型 实例 
3. date 类 型 


input 元 素 里 的 date 类 型 在 开发 网 页 过 程 中 是 非常 多 见 的 。 例 如 我 们 经 常 看 到 的 购买 日 期 、 
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@@ 。。 第 10 章 II 
发 布 时 间 、 订 票 时 间 。 这 种 date 类 型 的 时 间 是 以 日 历 的 形式 来 方便 用 户 输入 的 。 


在 HIML4 中 ， 需 要 结合 使 用 JavaScript 才 能 实现 日 历 选择 日 期 的 效果 ， 在 HIML5 中 ， 只 需 
要 设置 input 为 date 类 型 即 可 ， 提 交 表 单 的 时 候 也 不 需要 验证 数据 了 ， 如 图 10-24 所 示 。 


30 人 63 EEC 
© 所 全 会 | 田 file:///D:/HTML+CSS 网 页 币 作 与 布 | HC 入 国 . 二 由 生计 Q| 
高 v5 ” 国 SF BPs PREFD 国 Unis Gcogle > 用 7- 国 SMx 人 A 国 R ”更 G> 


后 一 桩 辐 
国 国 ”zstev 国 @] 
周 日 局 三 


OE EE 


图 10-24 date 类 型 实例 


4. time 类 型 
input 里 的 ttme 类 型 是 专门 用 来 输入 时 间 的 文本 框 ， 并 且 会 在 提交 时 会 对 输入 时 间 的 有 效 性 
进行 检查 。 它 的 外 观 可 能 会 根据 不 同类 型 的 浏览 器 而 出 现 不 同 的 表现 形式 。 


time 类 型 是 用 来 输入 时 间 的 ， 在 提交 的 时 候 检 查 是 否 输入 了 有 效 的 时 间 ， 如 图 10-25 所 示 。 


> 文件 要 看 收 车 工 失 逢 动 曾 一 叫 x 
HC 入 | 国 - 语 小 演 亏 Ql 
攻关 加 ”更 庆 > 


] 360 人 于 吕 63 
加 |& 人 安 | 但 | 园 fileyWDVyHTML+CSS 网 页 制作 与 机 
分 4 - 国 关 二 了 出 bk 二 网 共 M 中 心 加 Unke 口 Gcoale > 


Cd 和 F100% -| 


图 10-25 time 类 型 实例 
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课堂 实录 ~e 一 @ 
5. dateTime 类 型 
datetime 类 型 是 一 种 专门 用 来 输入 本 地 日 期 和 时 间 的 文本 框 ， 同 样 ， 它 在 提交 的 时 候 也 会 
对 数据 进行 检查 。 目 前 主流 浏览 器 都 不 支持 datetime 类 型 。 
<form> 
<input id=" linyikongtiao datetime" name=" linyikongtiao.com" type="datetime"/> 
<input type="submit"” value=" 提 交 "/> 


</form> 
@ 7 课 后 练习 一 一 
@ 
一 、 填 空 题 
1. 元 素 可 以 包含 独立 的 内 容 项 ， 所 以 可 以 包含 一 个 论坛 帖子 、 一 篇 杂志 文 
、 一 篇 博客 文章 、 用 户 评论 等 。 
2. 元 素 在 HTML5 中 用 于 包 诸 一 个 导航 链接 组 ， 用 于 显 式 地 说 明 这 是 一 个 导 
航 组 ， 在 同一 个 页 面 中 可 以 同时 存在 多 个 
二 、 选 择 题 
上 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 面 
内 的 一 个 内 容 区 块 的 标题 。 
A.address B. header C.aside 
2 通常 包括 其 相关 区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链 接 及 版 权 信息 等 。 
A. hgroup B. address C. footer 


本 章 主要 讲述 了 认识 HTML 5、HTML 5 与 HTML 4 的 区 

、HTML yr 吉 构 元 素 。 随 着 HTML 5 的 迅猛 发 展 ， 各 大 浏览 器 开发 公司 如 

ws 微软 、 革 果 和 Opera 的 浏览 器 开发 业务 都 变 得 异常 繁忙 。 在 这 种 局 势 下 ， 学 习 HIML 5 

无 疑 成 为 Web 开 发 者 的 一 大 重要 任务 ， 谁 先 学 会 HIML 5， 谁 就 掌握 了 迈 向 未 来 Web 平 台 的 一 把 
钥匙 。 
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第 11 章 
动态 网 站 设计 基础 


本 章 导 读 
动态 网 页 技术 的 出 现 使 得 网 站 从 展示 平台 
变 成 了 网 络 交互 平台 。Dreamweaver 的 可 视 化 工 
具 可 以 开发 动态 站 点 ， 而 不 必 编写 复 杂 的 代码 。 
动态 网 页 以 数据 库 技 术 为 基础 ， 可 以 大 大 降低 网 
站 维护 的 工作 量 。 本 章 主要 学 习 动态 网 页 平台 的 
搭建 、 数 据 库 连 接 的 创建 、 编 辑 数据 表 记 录 、 添 
加 服务 器 行为 。 


技术 要 点 


友 ”熟悉 动态 网 页 的 特点 与 制 
作 过 程 
了 解 如 何 搭建 本 地 服务 器 
掌握 创建 数据 库 连 接 
掌握 添加 服务 器 行为 
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动态 网 页 一 般 都 是 以 数据 库 支持 为 基础 ， 便 于 维护 ， 提 高 工 
作 效 率 ， 并 能 够 根据 用 户 的 要 求 和 选择 做 出 动态 改变 。 本 节 介 绍 动态 网 页 的 特点 、 工 作 原 理 和 
核心 技术 。 


且 11.1.1 动态 网 页 特点 
动态 网 页 是 与 静态 网 页 相对 应 的 ， 也 就 是 说 ， 网 页 URL 的 后 缀 不 是 .htm、html、.shtml、.xml 
等 静态 网 页 的 常见 形式 ， 而 是 以 .asp、jsp、.pPhp、.perl、.cgi 等 形式 为 后 级 ， 并 且 在 动态 网 页 网 址 
中 有 一 个 标志 性 的 符号 
这 里 说 的 动态 网 页 ， 与 网 页 上 的 各 种 动画 、 滚 动 字幕 等 视觉 上 的 “动态 效果 ”没有 直接 关 
系 ， 动 态 网 页 也 可 以 是 纯 文 字 内 容 的 ， 也 可 以 是 包含 各 种 动画 的 内 容 ， 这 些 只 是 网 页 具体 内 容 
的 表现 形式 ， 无 论 网 页 是 否 具 有 动态 效果 ， 采 用 动态 网 站 技术 生成 的 网 页 都 称 为 动态 网 页 。 
从 网 站 浏览 者 的 角度 来 看 ， 无 论 是 动态 网 页 还 是 静态 网 页 ， 都 可 以 展示 基本 的 文字 和 图 片 
信息 ， 但 从 网 站 开发 、 管 理 、 维 护 的 角度 来 看 就 有 很 大 的 差别 。 将 动态 网 页 的 一 般 特点 简要 归 
纳 如 下 。 
(1) 动态 网 页 以 数据 库 技 术 为 基础 ， 可 以 大 大 降低 网 站 维护 的 工作 量 。 
(2) 采用 动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 ， 如 用 户 注册 、 用 户 登 录 、 在 线 调 
查 、 用 户 管理 、 订 单 管理 等 。 
(3) 动态 网 页 实际 上 并 不 是 独立 存在 于 服务 器 上 的 网 页 文件 ， 只 有 当 用 户 请 求 时 服务 器 
才 返 回 一 个 完整 的 网 页 。 
(4) 动态 网 页 中 的 “? ”对 搜索 引擎 检索 存在 一 定 的 问题 ， 搜 索引 擎 一 般 不 可 能 从 一 个 
网 站 的 数据 库 中 访问 全 部 网 页 ， 或 者 出 于 技术 方面 的 考虑 ， 搜 索 蜘蛛 不 去 抓 取 网 址 中 “? ”后 
面 的 内 容 ， 因 此 采用 动态 网 页 的 网 站 在 进行 搜索 引擎 推广 时 ， 需 要 做 一 定 的 技术 处 理 才 能 适应 
搜索 引擎 的 要 求 。 


GD » 
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肝 11.1.2 动态 网 页 工作 原理 
动态 网 页 技术 的 工作 原理 是 :使 用 不 同 技术 编写 的 动态 页 面 保存 在 Web 服 务 器 内 ， 当 客户 


端 用 户 向 Web 服 务 器 发 出 访问 动态 页 面 的 请 求 时 ，Web 服 务 器 将 根据 用 户 所 访问 页 面 的 后 缀 名 
确定 该 页 面 所 使 用 的 网 络 编程 技术 ， 然 后 把 该 页 面 提交 给 相应 的 解释 引擎 ， 解 释 引 擎 扫描 整个 
页 面 找 到 特定 的 定 界 符 ， 并 执行 位 于 了 
定 界 符 内 的 脚本 代码 以 实现 不 同 的 功 ae 要 本 和 
能 ， 如 访问 数据 库 ， 发 送 电子 邮件 ， 客户 1 Se 3 
执行 算术 或 逻辑 运算 等 ， 最 后 把 执行 和 和 各所 交 折 
结果 返回 Web 服 务 器 ， 最终，Web 服 
3 ep Se. 其 他 网 络 
务 器 把 解释 引擎 的 执行 结果 连同 页 面 a 到 人 于 
上 的 HTML 内 容 及 各 种 客户 端 脚本 一 ps wm 服务 
同 传送 到 客户 端 。 图 11-1 所 示 为 动态 
网 页 的 工作 原理 图 。 图 11-1 动态 网 页 的 工作 原理 图 
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国 11.1.3 ”动态 网 站 技术 核心 


动态 网 站 的 工作 方式 其 实 很 简单 。 那 么 是 不 是 动态 网 页 学 习 和 开发 就 轻松 了 呢 ? 显然 不 是 
这 样 的 。 要 使 动态 网 站 动 起 来 ， 其 中 会 需要 多 种 技术 进行 支撑 。 简 单 概括 就 是 : 数据 传输 、 数 
据 存储 和 服务 管理 。 

1. 数据 传输 

有 的 读者 可 能 会 想到 ，HTTP 不 是 专门 负责 数据 传输 的 吗 ? 是 的 。 但 是 HTTP 仅 是 一 个 应 用 
层 的 自然 协议 。 如 何 获取 HTTP 请 求 消息 还 必须 使 用 一 种 技术 来 实现 。 

可 以 选用 一 种 编程 语言 (如 C、Java 等 ) 来 设置 和 接收 HTTP 请 求 和 响应 消息 的 构成 ， 但 是 
这 种 过 程 是 非常 费时 、 费 力 ， 也 是 易 错 的 劳动 ， 对 于 广大 初学 者 来 说 简直 就 是 望尘莫及 。 

如 果 能 够 提供 现成 的 技术 ， 封 装 对 HTTP 请 求 和 响应 消息 的 控制 ， 岂 不 是 简化 了 开发 ， 
降低 学 习 的 门槛 。 而 服务 器 技术 的 一 个 核心 功能 就 是 负责 对 HITP 请 求 和 响应 消息 的 控制 。 例 
如 ， 在 ASP 中 ， 我 们 直接 调用 Request 和 Response 这 两 个 对 象 ， 然 后 利用 它们 包含 的 属性 和 方法 
就 可 以 完成 HTTP 请 求 和 响应 的 控制 。 在 其 他 服务 器 技术 中 ， 也 都 提供 这 些 基本 功能 ， 但 是 所 
使 用 的 对 象 和 方法 可 能 略 有 不 同 。 

2. 数据 存储 

数据 传输 是 动态 网 站 的 基础 。 但 是 如 何 存储 数据 也 是 动态 网 站 必须 解决 的 核心 技术 之 一 。 
也 许 你 可 能 想到 利用 HTTP 协 议 实现 在 不 同 页 面 之 间 传 输 信 息 。 是 的 ， 但 是 这 仅 解 决 了 信息 传 
输 的 基本 途经 ， 但 不 是 最 佳 方式 。 试 想 ， 在 会 员 管 理 网 站 中 ， 为 了 保证 每 一 位 登录 会 员 都 能 够 
通过 每 个 页 面 的 验证 ， 我 们 可 能 需要 在 HTTP 中 不 断 附加 每 位 登录 会 员 的 信息 ， 这 本 身 就 是 件 
很 麻烦 的 事情 。 如 果 登 录 会 员 很 多 ， 无 疑 会 增加 HITP 传 输 的 负担 ， 甚 至 造成 网 络 的 堵塞 ， 更 
为 要 命 的 是 这 很 容易 造成 整个 网 络 传输 的 混乱 。 

显然 如 果 使 用 HTTP 来 完成 所 有 信息 的 共享 和 传输 问题 是 很 不 现实 的 ， 也 是 行 不 通 的 。 最 
理想 的 方法 是 服务 器 能 够 提供 一 种 技术 来 存储 不 同类 型 的 数据 。 例 如 ， 根 据 信 息 的 应 用 范围 可 
以 分 为 :应 用 程序 级 变量 〈 存 储 的 信息 为 所 有 人 共享 ) 和 会 话 级 变量 (存储 的 信息 仅 为 某 个 用 
户 使 用 ) 。 一 般 服务 器 技术 都 能 够 提供 服务 器 内 存 管 理 ， 在 服务 器 内 存 里 划分 出 不 同 区 域 ， 
专门 负责 存储 不 同类 型 的 变量 ， 以 实现 数据 的 共享 和 传递 。 另 外 ， 一 般 服务 器 技术 都 会 提供 
Cookie 技 术 ， 以 便 把 用 户 信息 保存 到 用 户 本 地 的 计算 机 中 ， 使 用 时 再 随时 从 客户 端 调 出 来 ， 从 
而 实现 信息 的 长 久保 存 和 再 利用 。 

3. 服务 管理 

如 果 说 解决 动态 网 站 的 数据 传输 和 存储 这 两 个 基本 问题 ， 动 态 网 站 的 条 件 基本 成 立 了 。 但 
是 要 希望 动态 网 站 能 够 稳健 地 运行 ， 还 需要 一 套 技术 来 维持 这 种 运行 状态 。 这 套 技术 就 是 服务 
器 管理 ， 实 际 上 这 也 是 服务 器 技术 中 最 复杂 的 功能 。 

当然 ， 我 们 这 里 所 说 的 服务 管理 仅仅 是 狭义 的 管理 概念 ， 它 仅 包 括 服务 器 参数 设置 ， 动 态 
网 站 环境 设置 ， 以 及 网 站 内 不 同 功能 模块 之 间 的 协同 管理 。 例 如 ， 网 站 物理 路 径 和 相对 路 径 的 
管理 、 服 务 器 安全 管理 、 网 站 默认 值 管理 、 扩 展 功 能 管理 和 辅助 功能 管理 ， 以 及 一 些 管理 工具 
支持 等 。 

你 可 以 想象 一 下 ， 如 果 没 有 服务 器 管理 技术 的 支持 ， 整 个 服务 器 可 能 只 能 运行 一 个 网 站 
(或 一 个 Web 应 用 程序 ) ， 动 态 网 页 也 无 法 准确 定位 自己 的 位 置 。 整 个 网 站 处 于 一 片 混乱 、 
混沌 状态 。 例 如 ， 在 ASP 服 务 器 技术 中 ， 我 们 可 以 利用 Server 对 象 来 管理 各 种 功能 ， 如 网 页 定 
位 、 环 境 参数 设置 、 安 装 扩展 插件 等 。 
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实际 上 目前 常用 的 3 类 服务 器 技术 就 是 ASP (Active Server 

Pages， 活 动 服务 器 网 页 ) 、JSP (JavaServer Pages，Java 服 务 器 网 页 ) 、PHP (Hypertext 
Preprocessor， 超 文本 预 处 理 程序 ) 。 这 些 技术 的 核心 功能 都 是 相同 的 ， 但 是 它们 基于 的 开发 语 
言 不 同 ， 实 现 功能 的 途径 也 存在 差异 。 如 果 当 你 掌握 了 一 种 服务 器 技术 ， 再 学 习 另 一 种 服务 器 
技术 ， 就 会 发 现 简 单 多 了 。 这 些 服务 器 技术 都 可 以 设计 出 常用 动态 网 页 功能 ， 对 于 一 些 特殊 功 
能 ， 虽 然 不 同 服务 器 技术 支持 程度 不 同 ， 操 作 的 难 易 程度 也 略 有 差别 ， 甚 至 还 有 些 功 能 必须 借 
助 各 种 外 部 扩展 才 可 以 实现 。 
月 11.2.1 ASP 

ASP 是 Active Server Page 的 缩写 ， 意 为 “动态 服务 器 页 面 ”。ASP 是 微软 公司 开发 的 代替 
CGI 脚本 程序 的 一 种 应 用 , 它 可 以 与 数据 库 和 其 他 程序 进行 交互 ， 是 一 种 简单 、 方 便 的 编程 工 
具 。ASP 的 网 页 文件 的 格式 是 .asp， 现 在 常用 于 各 种 动态 网 站 中 。ASP 是 一 种 服务 器 端 脚本 编写 
环境 ， 可 以 用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。ASP 采 用 VB Script 和 JavaScript 脚 本 语言 
作为 开发 语言 ， 当 然 也 可 以 能 入 其 他 脚本 语言 。ASP 服 务 器 技术 只 能 在 Windows 系 统 中 使 用 。 

ASP 网 页 具有 以 下 特点 。 

(1) 利用 ASP 可 以 实现 突破 静态 网 页 的 一 些 功 能 限制 ， 实 现 动态 网 页 技术 。 

(2) ASP 文 件 是 包含 在 HTML 代 码 所 组 成 的 文件 中 的 ， 易 于 修改 和 测试 。 

(3) 服务 器 上 的 ASP 解 释 程 序 会 在 服务 器 端 执 行 ASP 程 序 ， 并 将 结果 以 HTML 格 式 传送 到 
客户 端 浏 览 器 上 ， 因 此 使 用 各 种 浏览 器 都 可 以 正常 浏览 ASP 所 产生 的 网 页 。 

(4) ASP 提 供 了 一 些 内 置 对 象 ， 使 用 这 些 对 象 可 以 使 服务 器 端 脚本 功能 更 强 。 例 如 可 以 
从 Web 浏 览 器 中 获取 用 户 通过 HTML 表 单 提交 的 信息 ， 并 在 脚本 中 对 这 些 信息 进行 处 理 ， 然 后 
向 Web 浏 览 器 发 送信 息 。 

(5) ASP 可 以 使 用 服务 器 端 ActiveX 组 件 来 执行 各 种 各 样 的 任务 ， 例 如 存 取 数据 库 、 发 送 
Email 或 访问 文件 系统 等 。 

(6) 由 于 服务 器 是 将 ASP 程 序 执行 的 结果 以 HTML 格 式 传 回 客户 端 浏览 器 ， 因 此 使 用 者 不 
会 看 到 ASP 所 编写 的 原始 程序 代码 ， 可 防止 ASP 程 序 代 码 被 窃取 。 

(7) 方便 连接 Access 与 SQL 数据 库 。 

(8) 开发 需要 有 丰富 的 经 验 ， 否 则 会 留 出 漏洞 ， 让 黑客 利用 进行 注入 攻击 。 
国 11.2.2 PHP 

PHP 也 是 一 种 比较 流行 的 服务 器 技术 ， 它 最 大 的 优势 就 是 开放 性 和 免费 服务 。 你 不 用 花费 
一 分 钱 ， 就 可 以 从 PHP 官 方 站 点 (http:/www.php.net) 下 载 PHP 服 务 软 件 ， 并 不 受 限制 地 获得 
源码 ， 甚 至 可 以 从 中 加 进 自己 的 功能 。PHP 服 务 器 技术 能 够 兼容 不 同 的 操作 系统 。PHP 页 面 的 
扩展 名 为 .php。 

PHP 有 以 下 特性 。 

(1) 开放 的 源 代 码 : 所 有 的 PHP 源 代码 事实 上 都 可 以 得 到 。 

(2) PHP 是 免费 的 : 和 其 他 技术 相 比 ，PHP 本 身 免费 上 且 是 开源 代码 。 

(3) PHP 的 快捷 性 : 程序 开发 快 ， 运 行 快 ， 技 术 本 身 学 习 快 。 因 为 PHP 可 以 被 嵌入 于 
HTML 语 言 ， 它 相对 于 其 他 语言 ， 编 辑 简单 ， 实 用 性 强 ， 更 适合 初学 者 。 

(4) 跨 平 台 性 强 : 由 于 PHP 是 运行 在 服务 器 端的 脚本 ， 可 以 运行 在 UNIX、Linux、 
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Windows 下 。 
(5) 效率 高 : PHP 消 耗 相 当 少 的 系统 资源 
(6) 图 像 处 理 : 用 PHP 动 态 创建 图 像 。 
(7) 面向 对 象 ， 在 PHP4、PHP5 中 ， 面 向 对 象 方面 都 有 了 很 大 的 改进 ， 现 在 PHP 完 全 可 以 
用 来 开发 大 型 商业 程序 。 
(8) 专业 专注 : PHP 支 持 脚本 语言 为 主 ， 同 为 类 C 语 言 。 


肯 11.2.3 JSP 


JSP 是 Sun 公 司 倡导 、 许 多 公司 参与 一 起 建立 的 一 种 动态 网 页 技术 标准 。JSP 可 以 在 Serverlet 
和 JavaBean 技 术 的 支持 下 ， 完 成 功能 强大 的 Web 应 用 开发 。 另 外 ，JSP 也 是 一 种 跨 多 个 平台 的 服 
务 器 技术 ， 几 乎 可 以 执行 于 所 有 平台 。 

JSP 技 术 是 用 Java 语 言 作为 脚本 语言 的 ，JSP 网 页 为 整个 服务 器 端的 Java 库 单元 提供 了 一 个 
接口 来 服务 于 HTTP 的 应 用 程序 。 

在 传统 的 网 页 HTMIL 文 件 (*.htm,*.htm]) 中 加 入 Java 程 序 片段 和 JSP 标 记 (tag)， 就 构成 了 JSP 
网 页 (*jsp)。Web 服 务 器 在 遇 到 访问 JSP 网 页 的 请 求 时 ， 首 先 执行 其 中 的 程序 片段 ， 然 后 将 执行 
结果 以 HTML 格式 返回 给 客户 。 程 序 片段 可 以 操作 数据 库 、 重 新 定向 网 页 及 发 送 email 等 ， 这 就 
是 建立 动态 网 站 所 需要 的 功能 。 

JSP 的 优点 如 下 所 述 。 

(1) 对 于 用 户 界面 的 更 新 ， 其 实 就 是 由 Web Server 进 行 的 ， 所 以 给 人 的 感觉 更 新 很 快 。 
(2) 所 有 的 应 用 都 是 基于 服务 器 的 ， 所 以 它们 可 以 时 刻 保持 最 新 版 本 。 
(3) 客户 端的 接口 不 是 很 繁琐 ， 对 于 各 种 应 用 易于 部 署 、 维 护 和 修改 。 


中 11.2.4 ASP、PHP 和 JSP 比 较 

ASP、PHP 和 JSP 这 三 大 服务 器 技术 具有 很 多 共同 的 特点 ， 如 下 所 述 。 

(1) 都 是 在 HTML 源 代码 中 混合 其 他 脚本 语言 或 程序 代码 。 其 中 HTML 源 代码 主要 负责 描 
述 信息 的 显示 结构 和 样式 ， 而 脚本 语言 或 程序 代码 则 用 来 描述 需要 处 理 的 逻辑 。 

(2) 程序 代码 都 是 在 服务 器 端 经 过 专门 的 语言 引擎 解释 执行 之 后 ， 然 后 把 执行 结果 能 入 
到 HIML 文 档 中 ， 最 后 再 一 起 发 送 给 客户 端 浏览 器 。 

(3) ASP、PHP 和 JSP 都 是 面向 Web 服 务 器 的 技术 ， 客 户 端 浏览 器 不 需要 任何 附加 的 软件 
支持 。 

当然 ， 它 们 也 存在 很 多 不 同 ， 例 如 : 

(1) JSP 代 码 被 编译 成 Servlet， 并 由 Java 虚 拟 机 解释 执行 ， 这 种 编译 操作 仅 在 对 JSP 页 面 的 
第 一 次 请 求 时 发 生 ， 以 后 就 不 再 需要 编译 。 而 ASP 和 PHP 则 每 次 请 求 都 需要 进行 编译 。 因 此 ， 
从 执行 速度 上 来 说 ，JSP 的 效率 当然 最 高 。 

(2) 目前 国内 的 PHP 和 ASP 应 用 最 为 广泛 。 由 于 JSP 是 一 种 较 新 的 技术 ， 国 内 使 用 较 少 。 
但 是 在 国外 ，JSP 已 经 是 比较 流行 的 一 种 技术 ， 尤 其 电子 商务 类 网 站 多 采用 JSP。 

(3) 由 于 免费 的 PHP 缺 乏 规模 支持 ， 使 得 它 不 适合 应 用 于 大 型 电子 商务 站 点 ， 而 更 适 

一 些小 型 商业 站 点 。ASP 和 JSP 则 没有 PHP 的 这 个 缺陷 。ASP 可 以 通过 微软 的 COM 技 术 获 得 
ActiveX 扩 展 支 持 ，JSP 可 以 通过 Java Class 和 EJB 获 得 扩展 支持 。 同 时 升级 后 的 ASPNET 更 是 获 
得 NET 类 库 的 强大 支持 ， 编 译 方式 也 采用 了 JSP 的 模式 ， 功 能 可 以 与 JSP 相 抗衡 。 

总 之 ，ASP、PHP 和 JSP 三 者 都 有 自己 的 用 户 群 ， 它 们 各 有 所 长 ， 读 者 可 以 根据 三 者 的 特点 

择 一 种 适合 自己 的 语言 。 
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要 建立 具有 动态 


11.3 


器 ， 选 择 一 门 Web 应 用 程序 开发 语言 ， 为 了 应 用 


时 ， 因 为 是 在 Dreamweaver 中 开发 的 ， 还 需要 建立 一 个 Dreamweaver 站 点 ， 该 站 


器 


的 Web 应 用 程序 ， 必 需 建立 一 个 Web 服 务 
的 深入 还 需要 选择 一 款 数 据 库 管 理 软件 。 同 
点 能 够 随时 调试 


动态 页 面 。 因 此 创建 一 个 这 样 的 动态 站 点 ， 需 要 Web 服 务 器 +Web 开 发 程序 语言 + 数据 库 管 理 软 


件 +Dreamweaver 动 态 站 点 。 


肯 11.3.1 安装 lIS 一 一 一 一 


IIS (Internet Information Server， 互 联网 | 
信息 服务 ) 是 一 种 Web 服 务 组 件 ， 它 提供 的 ; 
服务 包括 Web 服 务 器 、FTP 服 务 器 、NNTP 服 ; 
务 器 和 SMTP 服 务 器 ， 这 些 服务 分 别 用 于 网 页 ; 

览 、 文 件 传输 、 新 闻 服务 和 邮件 发 送 等 方 : 

面 。 使 用 这 个 组 件 提 供 的 功能 ， 使 得 在 网 络 
(包括 互联 网 和 局 域 网 ) 上 发 布 信息 成 了 一 
件 很 简单 的 事情 。 

安装 IS 的 具体 操作 步骤 如 下 。 

在 Windows7 系 统 下 ， 执 行 “ 开 始 ”| “控制 面 


板 ” | “程序 ”命令 ， 弹 出 如 图 112 所 示 的 页 面 。 
三 ass 
[下 Css 
下 
-5 Pe 

图 11-2 打开 或 关闭 Windows 功 能 ! 
弹出 “Windows 功 能 ”对 话 框 ， 可 以 看 到 有 | 
此 对 


| 回 安装 完成 后 ， 再 次 进入 “控制 面板 ”， 


需要 手动 选择 的 ， 勾 选 需要 安装 的 功 : 
能 复 选 框 ， 如 图 11-3 所 示 。 : 


i 


加 Es 
Tenet sr 守 
于 业 TFIP 才 关 寻 


图 11-3 “Windows 功 能 ”对 话 框 


单 击 “ 确 定 ” 按 钮 ， 弹 出 图 11- 4 所 示 的 | 


Windows 正在 中 慌 功 能 ， 访 税 算 。 这 可 能 需 
至 几 分 神 . 


图 11-4 IIS 子 组 件 的 选择 画面 

选择 
“管理 工具 ”选项 ， 双 击 “Internet 信 息 服 
务 (IIS) 管 理 器 ”选项 ， 进 入 IIS 设 置 ， 如 图 
11-5 所 示 。 


OvD rw ma a ad | 


a 
于 于 ore ainda ~ | 3 2013/10/10 915 


图 11-5 进入 IIS 设 置 


四 选择 Default Web Site， 并 双击 ASP 的 选项 


如 


图 11-6 所 示 。 


“Microsoft Windows” 对 话 框 。 
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图 11-6 双击 ASP 选 项 


园 ITs7 中 ASP 父 路 径 是 没有 启用 的 ， 要 选择 
True， 即 可 开启 父 路 径 ， 如 图 11-7 所 示 。 


图 11-7 可 开启 父 路 径 


单 击 右 侧 的 “高 级 设置 ” 超 链接 ， 弹 出 “高 | 
级 设置 ”对 话 框 ， 设 置 “物理 路 径 ”， 如 图 | 
11-8 所 示 。 


图 11-8 设置 “物理 路 径 ” 


园 单 击 “编辑 网 站 ”下 面 的 “编辑 ”按钮 ， 弹 | 
出 “网 站 绑 定 ”对 话 框 ， 单 击 右 侧 的 “ 编 } 
i 国 弹出 “添加 默认 文档 ”对 话 框 ， 在 “名 称 ” 


辑 ” 按 钮 设置 网 站 的 端口 ， 如 图 11-9 所 示 。 
i - 
| 


图 11-9 


“网 站 绑 定 ”对 话 框 


@ 一 e 一 第 11 章 加 JESNRRSE 瑟 重 


有 11.3.2 配置 Web 服 务 器 一。 
| 单 击 “Internet 信 息 服务 (IIS) 管理 器 ” 


! 攻 [© oe» Re , Orme Web se» 


| 


对 话 框 中 的 “默认 文档 ”按钮 ， 如 图 
11-10 所 示 。 


Er 


ie se 


nm 


Eo: pe 


图 11-10 单 击 “ 上 默认 文档 ”按钮 


; 园 在 打开 的 页 面 中 单 击 右 侧 的 “添加 ” 超 链 


接 ， 如 图 11-11 所 示 。 


图 11-11 单 击 右 侧 的 “添加 ” 超 链 接 


文本 框 中 输入 名 称 ， 单 击 “ 确 定 ”按钮 即 
可 ， 如 图 11-12 所 示 。 


图 11-12 


“添加 上 默认 文档 ”对 话 框 
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数据 库 相 关 术 语 


数据 库 是 创建 动态 网 页 的 基础 。 对 于 网 站 来 说 一 般 都 要 准备 
Rs 利用 数据 库 制 作 的 网 站 ， 一 方面 ， 在 前 台 访 问 者 
可 以 利用 查 光 贡 能 根 伯 找到 自己 要 的 资料 ， 员 一 方面 ， 在 后 合 
管理 系统 界面 很 直观 ， 即 使 不 懂 计 算 机 的 人 也 很 容易 学 会 使 用 。 


1 1 . 


很 方便 地 管理 网 站 ， 而 且 后 全 


且 11.4.1 什么 是 数据 库 


数据 库 就 是 计算 机 中 用 于 存储 、 处 理 | 
大 量 数据 的 软件 ， 一 些 关于 某 个 特定 主题 或 | 
目的 的 信息 集合 。 数 据 库 系统 主要 目的 在 于 | 
维护 信息 ， 并 在 必要 时 提供 协助 取得 这 些 | 


信息 。 
互联 网 的 内 容 信息 绝 大 多 数 都 是 存储 


在 数据 库 中 ， 可 以 将 数据 库 看 作 是 一 家 制造 | 
仓库 


工厂 的 产品 仓库 ， 专 门 用 于 存放 产品 ， 
具有 严格 而 规范 的 管理 制度 ， 入 库 、 出 库 、 
清点 、 维 护 等 日 常 管理 工作 都 十 分 有 序 ， 而 
且 还 以 科学 、 有 效 的 手段 保证 产品 的 安全 。 


数据 库 的 出 现 和 应 用 使 得 客户 对 网 站 内 容 的 | 
修改 、 删 除 、 搜 索 变 得 更 为 轻松 、 自 
由 、 简 单 和 快捷 。 网 站 的 内 容 既 繁多 ， 又 复 | 


新 建 、 


上 11.4.2 数据库 表 


在 关系 数据 库 中 ， 数 据 库 表 是 一 系列 二 维 | 


数组 的 集合 ， 用 来 代表 和 储存 数据 对 象 之 间 的 
关系 。 它 由 纵向 的 列 和 横向 的 行 组 成 ， 例 如 一 | 


个 有 关 作 者 信息 的 名 为 authors 的 表 中 ， 每 个 | 


列 包 含 的 是 所 有 作者 的 某 个 特定 类 型 的 信息 ， 
比如 “姓氏 ”， 


的 所 有 信息 : 姓 、 名 、 住 址 等 。 


对 于 特定 的 数据 库 表 ， 列 的 数目 一 般 事 | 
而 行 | 


常见 的 数据 库 管 理 系统 


目前 有 许多 数据 库 产 品 ， 如 Microsoft Access、Microsoft SQL 
以 自己 特有 的 功能 ， 在 数据 库 市 场 上 占有 一 席 之 地 。 下 面 简要 介绍 几 种 


先 固定 ， 各 列 之 间 可 以 由 列 名 来 识别 。 


] 1 .> 


Server 和 Oracle 等 产品 各 
常用 的 数据 库 管 理 系 统 。 
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允 对 允 对 对 对 对 对 对 对 对 


而 每 行 则 包含 了 某 个 特定 作者 | 
| 以 唯一 和 完整 标识 的 数据 列 或 属性 的 组 合 。 


， 网 站 管理 者 通过 后 台 管 理 系统 


杂 ， 而 且 数 量 和 长 度 根本 无 法 统计 ， 所 以 必 
须 采 用 数据 库 来 管理 。 

成 功 的 数据 库 系 统 应 具备 的 特点 如 下 所 述 。 
功能 强大 。 

能 准确 地 表示 业务 数据 。 
容易 使 用 和 维护 。 

对 最 终 用 户 操作 的 响应 时 间 合理 。 
便于 数据 库 结构 的 改进 。 

便于 数据 的 检索 和 修改 。 

较 少 的 数据 库 维护 工作 。 

有 效 的 安全 机 制 能 确保 数据 安全 。 

元 余数 据 最 少 或 不 存在 。 

便于 数据 的 备份 和 恢复 。 

数据 库 结构 对 最 终 用 户 透 明 。 


的 数目 可 以 随时 、 动 态 变化 。 
关系 键 是 关系 数据 库 的 重要 组 成 部 分 。 
关系 键 是 一 个 表 中 的 一 个 或 几 个 属性 ， 用 来 
标识 该 表 的 每 一 行 或 与 另 一 个 表 产 生 联系 。 
主键 ， 又 称 主 码 〈 英 语 : primary key 或 
unique key) 。 数 据 库 表 中 对 储存 数据 对 象 子 


一 个 数据 列 只 能 有 一 个 主键 ， 且 主键 的 取 值 
不 能 缺失 ， 即 不 能 为 空 值 (Null) 。 
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1. Oracle 

Oracle 是 一 个 最 早 商 品 化 的 关系 型 数据 库 管理 系统 ， 也 是 应 用 广泛 、 功 能 强大 的 数据 库 管 
理 系统 。Oracle 作 为 一 个 通用 的 数据 库 管 理 系 统 ， 不 仅 具有 完整 的 数据 管理 功能 ， 还 是 一 个 分 
布 式 数据 库 系统 ， 支 持 各 种 分 布 式 功能 ， 特 别 是 支持 Internet 应 用 。 作 为 一 个 应 用 开发 环境 ， 
Oracle 提 供 了 一 套 界面 友好 、 功 能 齐全 的 数据 库 开发 工具 。Oracle 使 用 PL/SQL 语 言 执行 各 种 
操作 ， 具 有 可 开放 性 、 可 移植 性 、 可 伸缩 性 等 功能 。 特 别 是 在 Oracle 8 中 ， 支 持 面向 对 象 的 功 
能 ， 如 支持 类 、 方 法 、 属 性 等 ， 使 得 Oracle 产 品 成 为 一 种 对 象 /关系 型 数据 库 管理 系统 。 

2. Microsoft SQL Server 

Microsoft SQL Server 是 一 种 典型 的 关系 型 数据 库 管 理 系统 ， 可 以 在 许多 操作 系统 上 运行 ， 
它 使 用 Transact-SQL 语 言 完成 数据 操作 。 由 于 Microsoft SQL Server 是 开放 式 的 系统 ， 其 他 系统 
可 以 与 它 进行 完好 的 交互 操作 。 有 目前 最 新 版 本 的 产品 为 Microsoft SQL Server 2000， 它 具有 可 靠 
性 、 可 伸缩 性 、 可 用 性 、 可 管理 性 等 特点 ， 为 用 户 提供 完整 的 数据 库 解 决 方案 。 

3. Microsoft Access 

作为 Microsoft Office 组 件 之 一 的 Microsoft Access 是 在 Windows 环 境 下 非常 流行 的 桌面 型 数 
据 库 管理 系统 。 使 用 Microsoft Access 不 用 编写 任何 代码 ， 只 需 通过 直观 的 可 视 化 操作 就 可 以 完 
成 大 部 分 数据 管理 任务 。 在 Microsoft Access 数 据 库 中 ， 包 括 许多 组 成 数据 库 的 基本 要 素 。 这 些 
要 素 是 存储 信息 的 表 、 显 示人 机 交互 界面 的 窗 体 、 有 效 检索 数据 的 查询 、 信 息 输出 载体 的 报 
表 、 提 高 应 用 效率 的 宏 、 功 能 强大 的 模块 工具 等 。 它 不 仅 可 以 通过 ODBC 与 其 他 数据 库 相 连 ， 
实现 数据 交换 和 共享 ， 还 可 以 与 Word、Excel 等 办 公 软 件 进行 数据 交换 和 共享 ， 并 且 通 过 对 象 
链接 与 岩 入 技术 在 数据 库 中 嵌入 和 链接 声音 、 图 像 等 多 媒体 数据 。 

Access 更 适合 一 般 的 企业 网 站 ， 因 为 开发 技术 简单 ， 而 且 在 数据 量 不 是 很 大 的 网 站 上 ， 
检索 速度 快 。 不 用 专门 去 分 离 出 数据 库 空间 ， 数 据 库 和 网 站 在 一 起 ， 节 约 了 成 本 。 而 一 般 的 
大 型 政府 、 门 户 网 站 ， 由 于 数据 量 比较 大 ， 所 以 选用 SQL 数据 库 ， 可 以 提高 海量 数据 检索 的 
速度 。 


| | 6 创建 Access 数 据 库 


与 其 他 关系 型 数据 库 系 统 相 比 ，Access 提 供 的 各 种 工具 既 简 
单 又 方便 ， 更 重要 的 是 Access 提 供 了 更 为 强大 的 自动 化 管理 功能 。 
下 面 以 Access 为 例 讲述 数据 库 的 创建 ， 具 体操 作 步 骤 如 下 。 


数据 库 是 计算 机 中 用 于 储存 、 处 理 大 量 数据 的 软件 。 在 创建 数据 库 时 ， 将 数据 存储 在 表 中 ， 表 是 数据 


库 的 核心 。 在 数据 库 的 表 中 可 以 按照 行 或 列 来 表示 信息 。 表 的 每 一 行 称 为 一 个 “记录 ”， 而 表 中 的 每 一 列 
称 为 一 个 “字段 ”， 字 段 和 记录 是 数据 库 中 最 基本 的 术语 。 


国 启动 Access 软 件 ， 执 行 “ 文 件 ”| “新建 ”命令 ， 打 开 “ 新 建文 件 ” 面 板 ， 如 图 11-13 所 示 ， 在 面 
板 中 单 击 “ 空 数据 库 ” 超 链接 。 

园 弹出 “文件 新 建 数 据 库 ” 对 话 框 ， 在 对 话 框 中 选择 数据 库 保存 的 位 置 ， 在 “文件 名 ”文本 框 中 
输入 liuyan， 如 图 11-14 所 示 。 
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文 闻 守 建委 电话 


加- 人 XI 


六 轩 
EY 
国 六 所 访 有 页 
国 借用 现 有 数据 的 项 目 


团 合用 新 数据 的 项 上 
团 根据 现 有 文件 


模板 
到 网 上 搜索 


2 a i 


| 全 有 区 型 加: | 下 cosoft DrGce hxcess 车 入 库 
图 11-13 “新 建文 件 ” 面 板 图 11-14 “文件 新 建 数据 库 ” 对 话 框 


园 单 击 “ 创 建 ”按钮 ， 弹 出 图 11-15 所 示 的 窗口 ， 双 击 “ 使 用 设计 器 创建 表 ”， 弹 出 “ 表 1: 表 ” 
对 话 框 ， 在 “字段 名 称 ” 和 “数据 类 型 ”文本 框 中 分 别 输入 图 11-16 所 示 的 字段 。 


硕 liwzan : 
硬 打 FT 四 


日 


站 站 站 站 站 站 


自 


对 对 对 对 


Access 为 数据 库 提 供 了 “文本 ”、 
“是 / 否 ”、“OLE 对 象 ”、“ 超 链接 ”、“ 查 阅 向 导 ” 等 10 种 数据 类 型 ， 每 种 数据 类 型 的 说 明 如 下 。 
文本 数据 类 型 ;可 以 输入 文本 字符 ， 如 中 文 、 英 文 、 数 字 、 字 符 、 空 白 。 

备注 数据 类 型 “可 以 输入 文本 字符 ， 但 他 不 同 于 文字 类 型 ， 它 可 以 保存 约 64K 字 符 。 

数字 数据 类 型 : 用 来 保存 如 整数 、 负 整数 、 小 数 、 长 整数 等 数值 数据 。 


货币 数据 类 型 : 适用 于 无 须 很 精密 计算 的 数值 数据 ， 例 如 ， 单 价 、 人 金额 等 。 


动 编号 后 ， 用 户 无 法 修改 其 内 容 。 

是 / 否 数据 类 型 : 关于 远 辑 判 断 的 数据 ， 部 可 以 设 定 为 此 类 型 。 
OLE 对 象 数据 类 型 : 为 数据 表 链 接 诸如 电子 表格 、 图 片 、 声 音 等 对 象 。 
超 链 接 数据 类 型 ， 用 来 保存 超 链接 数据 ， 如 网 址 、 电 子 邮 件 地 址 。 
查阅 向 导数 据 类 型 : 用 来 查询 可 预知 的 数据 字段 或 特定 数据 集 。 


el 


数据 放 【4ceess 2000 文件 格式 ) 
Mt Sew | xX | 7 

习 

园 十 向 5 创 妇 丙 

团 ” 通 it 输 入 关 据 娃 表 


| EE 
PH 机 可 可 者 有 天 小 所 革 开 的 二， 


图 11-16 输入 字段 


“备注 ”、“ 数 字 ”、“ 日 期 /时 间 ”、“ 人 党 币 ”、“ 自 动 编号 ”、 


期 /时 间 数 据 类 型 ; 用 来 保存 和 日 期 、 时 间 有 关 的 数据 。 


动 编号 数据 类 型 : 适用 于 自动 编号 类 型 ， 可 以 在 增加 一 笔 数 据 时 自动 加 1， 产 生 一 个 数字 的 字段 ， 自 


园 设计 完 表 后 关闭 设计 表 窗口 ， 弹 出 图 11-17 所 示 的 对 话 框 ， 提 示 “ 是 否 保存 对 表 1 设 计 的 更 
改 ”， 单 击 “ 是 ”按钮 ， 弹 出 图 11-18 所 示 的 “另存 为 ”对 话 框 ， 在 对 话 框 中 输入 表 的 名 称 。 


了 icrosoft Office Access 


A 香 保 存 对 表 “ 表 1” 的 设计 的 更 改 ? 


LEE 

图 11-17 提示 是 否 保存 表 图 11-18 “另存 为 ”对 话 框 
击 “ 确 定 ” 按 钮 ， 弹 出 图 11-19 所 示 的 对 话 框 ， 单 击 “ 是 ”按钮 即 可 插入 主键 ， 此 时 在 数据 库 
可 以 看 到 新 建 的 表 ， 如 图 11-20 所 示 。 


@ 一 ee 第 11 章 有 IFSRIERRRIEE 


EE 
到 他 用 E68 芋 末 
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EE 
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图 11-19 弹出 提示 信息 图 11-20 新 建 的 表 


| | 7/ 创建 数据 库 连接 
动态 页 面 最 主要 的 就 是 结合 后 人 数据库 ， 自 动 更 新 网 页 ， 所 


WO ee 任何 内 容 的 添加 、 删 除 、 修 改 、 检 索 都 是 建立 
在 连接 基础 上 进行 的 ， 可 以 想象 连接 的 重要 性 了 。 

要 在 ASP 中 使 用 ADO 对 象 来 操作 数据 库 ， 首 先 要 创建 一 个 指向 该 数据 库 的 ODBC 连 接 。 在 
Windows 系 统 中 ，ODBC 的 连接 主要 通过 ODBC 数 据 源 管理 器 来 完成 。 下 面 就 以 Windows 7 为 例 
讲述 ODBC 数 据 源 的 创建 过 程 ， 具 体操 作 步 骤 如 下 。 

国 执行 “控制 面板 ”| “系统 和 安全 ”|“ 管 理工 具 ”|“ 数 据 源 (ODBC) ”命令 ， 弹 出 “ODBC 数 

据 源 管理 器 ”对 话 框 ， 在 对 话 框 中 切换 到 “系统 DSN” 选 项 卡 ， 如 图 11-21 所 示 。 

园 单 击 “ 添 加 ”按钮 ， 弹 出 “创建 新 数据 源 ”对 话 框 ， 选 择 图 11-22 所 示 的 设置 后 ， 单 击 “ 完 成 ” 
按钮 。 


ovina 0 | 


I Fn 
Ei 
3 


图 11-21 “系统 DSN” 选 项 图 11-22 “创建 新 数据 源 ” 对 话 框 


1 64 位 Windows 7 的 操作 系统 里 ODBC 无 法 添加 
1 “修改 ”配置 ， 添 加 数据 源 时 只 有 SQL Server 可 
四 选 ， 如 图 11-23 所 示 。 


图 11-23 添加 数据 源 
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解决 方法 如 下 所 述 。 
通过 “C:/Windows/SysWOW64/odbcad32.exe” 启 动 32 位 版 本 ODBC 管 理工 具 ， 便 可 解决 ， 
效果 如 图 11-24 所 示 。 


图 11-24 完成 效果 


弹出 图 11-25 所 示 的 “ODBC Microsoft Access 安 装 ” 对 话 框 ， 选 择 数据 库 的 路 径 ， 在 “数据 源 
名 ”文本 框 中 输入 数据 源 的 名 称 ， 单 击 “ 确 定 ” 按 钮 ， 在 图 11-26 所 示 的 对 话 框 中 可 以 看 到 创建 


的 数据 源 mdb。 
O03C ne et le 
用户 ISH 条 5 D8 | 文件 二 [驱动 各 序 | 中 路 | 连 这 邮 | 关于 
和 
和 名称 蝶 动 程序 
国 ive bw Miosott hecess ge) Fa || 
(©... ] 


EDT 


才 捐 库 
EL 二 女人 .，] [ 除 复 0)，。 |[ 压 编 ). 


Er 
| 


EE Eg [ERW 


图 11-25 “ODBC Microsoft Access 安 装 ” 对 话 框 图 11-26 创建 的 数据 源 


11 8 ——=—=== 
@ 
简 答题 


1. 什么 是 IS， 如 何 安装 IS? 
2. 如 何 使 用 DSN 数 据 源 创 建 数据 库 连接 ? 


] ] 


动态 页 面 最 主要 的 作用 在 于 能 够 让 用 户 通过 浏览 器 来 访问 、 
管理 和 利用 存储 在 服务 器 上 的 资源 和 数据 ， 特 别 是 数据 库 中 的 数据 。 本 章 主 要 学 习 了 动态 网 页 
的 特点 与 制作 过 程 、 搭 建 本 地 服务 器 。 
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第 12 章 


GS 动态 网 站 开发 语言 ASP 


本 章 导 读 
ASP 是 Active Server Page 的 缩写 ， 意 为 “活动 服务 


器 网 页 ”。ASP 是 微软 公司 开发 的 代替 CGI 脚本 程序 的 一 
种 应 用 ， 它 可 以 与 数据 库 和 其 他 程序 进行 交互 ， 是 一 种 
简单 、 方 便 的 编程 工具 。ASP 的 网 页 文件 的 格式 是 .asp， 
现在 常用 于 各 种 动态 网 站 中 。 它 能 很 好 地 将 脚本 语言 、 
HTML 标 记 语言 和 数据 库 结合 在 一 起 ， 创 建 网 站 中 各 种 动 
态 应 用 程序 。 可 以 使 用 数据 库 将 信息 资料 进行 收集 可 以 
通过 网 页 程序 来 操控 数据 库 ， 可 以 随时 随地 发 布 最 新 的 消 
息 和 内 容 ; 可 以 快速 查找 需要 的 信息 资料 。 


技术 要 点 
了 解 ASP 的 基本 概念 
熟悉 ASP 的 工作 原理 
掌握 ASP 中 内 置 对 象 的 使 用 
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ASP 是 嵌入 网 页 中 的 一 种 脚本 语言 ， 
意 组 合 。ASP 文 件 名 的 格式 是 .asp， 而 不 是 传统 的 .htm。 


12. | 


文本 和 脚本 命令 的 任 3 
国 12.1.1 ASP 简 介 


ASP 是 一 种 服务 器 端 脚本 编写 环境 ， 可 | 


以 用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。 


比 ，ASP 网 页 具有 以 下 特点 。 


大” 利用 ASP 可 以 实现 突破 静态 网 页 的 一 些 功 | 


能 限制 ， 实 现 动 态 网 页 技术 。 


太 ”ASP 文 件 是 包含 在 HTML 代 码 所 组 成 的 文 | 


件 中 的 ， 易 于 修改 和 测试 。 
太 ”服务 器 上 的 ASP 解 释 程 序 会 在 服务 


妈 be sb 


到 客户 端 浏览 器 上 ， 因 此 使 用 各 种 浏览 
器 都 可 以 正常 浏览 ASP 所 产生 的 网 页 。 


太 ”ASP 提供 了 一 些 内 置 对 象 ， 使 用 这 些 对 象 | 

可 以 使 服务 器 端 脚本 功能 更 强 。 如 可 以 | 
户 通过 HTML 表 单 | 
提交 的 信息 ， 并 在 脚本 中 对 这 些 信息 进 ; 


从 Web 浏 览 器 中 获取 | 


行 处 理 ， 然 后 向 Web 浏 览 器 发 送信 息 


问 文件 系统 等 。 
太 FF 


虽 12.1.2 ASP 的 工作 原理 


步骤 。 


扩展 名 是 .asp。 
国 浏览 器 向 服务 器 发 出 请 求 。 
服务 器 引擎 开始 运行 ASP 程 序 。 
加 ASP 文 件 按照 从 上 到 下 的 顺序 开始 处 理 , 执 :; 
行 脚本 命令 ， 执 行 HIML 页 面 内 容 。 
国 页 面 信息 发 送 到 浏览 
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ASP 网 页 可 以 包含 HTML 标记 、 普 通 文本 、 脚 | 
本 命令 及 COM 组 件 等 。 利 用 ASP 可 以 向 网 页 | 
中 添加 交互 式 内 容 ， 也 可 以 创建 使 用 HTML 网 : 
页 作为 用 户 界面 的 Web 应 用 程序 。 与 HTML 相 ; 


器 端 制 | 
定 ASP 程 序 ， 并 将 结果 以 HTML 格 式 传送 


! | 误 疯 人 sr 


大 ASP 可 以 使 用 服务 器 端 ActiveX 组 件 来 执 | 两 部 分 组 成 


行 各 种 各 样 的 任务 ， 如 存 取 数 据 库 或 访 | 


图 12-2 所 示 ASP 的 工作 原理 分 为 以 下 几 个 : 


国 用 户 向 浏览 器 地 址 栏 输入 网 址 ， 默 认 页 面 的 | 


它 可 以 是 HIML 标 记 、 


HTML 格 式 传 回 客户 端 浏览 器 ， 因 此 使 用 
者 不 会 看 到 ASP 所 编写 的 原始 程序 代码 ， 
可 防止 ASP 程 序 代码 被 窃取 。 
下 面 实例 是 一 个 基本 的 ASP 的 程序 。 
<html> 
<head> 


<tit1le> 我 的 第 一 个 ASP 程 序 </title> 
</head> 

<body> 

<%response .write ("我 的 第 一 个 ASP 程 序 ") s> 
</body> 

</html> 


在 浏览 器 中 浏览 


览 效 果 如 图 12-1 所 示 。 


ER 


我 的 第 一 个 ASP 程 序 


图 12-1 

仔细 分 析 该 程序 可 以 看 出 ，ASP 程 序 共 

一 部 分 是 HIML 标 题 ， 另 一 部 分 
就 是 嵌入 在 “<%” 和 “%>” 中 的 ASP 程 序 。 

在 ASP 程 序 中 ， 需 要 将 内 容 输 出 到 页 面 


简单 的 ASP 程 序 


于 服务 器 是 将 ASP 程 序 执行 的 结果 以 | 上 时 ， 可 以 使 用 Response.Write0 方 法 ， 


TTP 请 求 


Wb 服务 器 SQL 请 末 数据 库 
| eis | | eis | 服务 器 
TM 界面 


图 12-2 ASP 的 工作 原理 
上 述 步 骤 基 本 上 是 ASP 的 整个 工作 流 


; 程 。 但 这 个 处 理 过 程 是 相对 简化 的 ， 在 实际 
”的 处 理 过 程 中 还 可 能 会 涉及 到 诸多 的 问题 
| 如 数据 库 操作 、ASP 页 面 的 动态 产生 


等 。 此 外 


@_。。 第 12 章 FITS 
Web 服 务 器 也 并 不 是 接 到 一 个 ASP 页 面 请 求 就 重新 编辑 一 次 该 页 面 ， 如 果 某 个 页 面 再 次 接收 到 
和 前 面 完全 相同 的 请 求 时 ， 服 务 器 会 直接 去 缓冲 区 中 读 取 编 译 的 结果 ， 而 不 是 重新 运行 。 


| 0 7 ASP 连 接 数 据 库 
@ 数据 库 网 页 动态 效果 的 实现 ， 其 实 就 是 将 数据 库 表 中 的 记录 


显示 在 网 页 上 。 因 此 如 何在 网 页 中 创建 数据 库 连 接 ， 并 读 取出 数据 显示 ， 是 开发 动态 网 页 的 一 
个 重点 。 

用 得 最 多 的 就 是 Access 和 SQL Server 数 据 库 ， 连 接 语句 如 下 。 
1. ASP 连 接 Access 数 据 库 语 名 


其 中 “Set Conn=Server.CreateObject("ADODB.Connection")” 为 建立 一 个 访问 数据 的 对 象 。 
“server.mappath("bbs.mdb")” 是 告诉 服务 器 Access 数 据 库 访 问 的 路 径 。 
2. ASP 连 接 SQLServer 数 据 库 语句 


其 中 “Set conn = Server.CreateObject("ADODB.Connection")” 为 设置 一 个 数据 库 的 连接 对 象 。 
“driver= () ”告诉 连接 的 设备 名 是 SQLServer。 

server 是 连接 的 服务 器 的 卫 地 址 ，Uid 是 指 用 户 的 用 户 名 ，pwd 是 指 的 用 户 的 password， 

database 是 用 户 数据 库 在 服务 器 端的 数据 库 的 名 称 。 
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Request 对 象 的 作用 是 与 客户 端 交互 ， 收 集 客户 端的 Form、 
Cookies、 超 链接 ， 或 者 收集 服务 器 端的 环境 变量 。 


侦 12.3.1 集合 对 象 
Request 提 供 了 如 下 5 个 集合 对 象 ， 利 用 这 些 集合 可 以 获取 不 同类 型 的 客户 端 发 送 的 信息 或 

服务 器 端 预定 的 环境 变量 的 值 。 

(1) Client Certificate 

(2) Cookies 

(3) Form 

(4) Query String 

(S$) Server Variables 

真 Client Certificate 
Client Certificate 用 于 检索 存储 在 发 送 到 HTTP 请 求 中 客户 端 证 书 中 的 字段 值 。 它 的 语法 
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如 下 。 
Request.Client Certificate 


I 浏览 器 阁 要 用 “https://” 与 服务 器 连接 ， 而 服务 器 详 也 要 设置 用 户 需要 认证 ， ere 
ClientCertificate” 才 会 有 效 。 | 


Em 
雄 Cookies 
Request. Cookies 和 Response. Cookies 是 相对 的 。Response. Cookies 是 将 Cookies 写 入 ， 而 它 
则 是 将 Cookies 的 值 取出 。 语 法 如 下 。 
变量 二 Request.Cookies (Cookies 的 名 字 ) 


友 Form 

Form 是 用 来 取得 由 表单 所 发 送 的 值 。 
友 Query String 

Query String 集 合 通过 处 理 用 户 使 用 GET 方 法 发 送 到 服务 器 端的 表单 信息 ， 将 URL 后 的 数据 
提取 出 来 。 


Query String 集 合 语法 如 下 。 
Request,. Query String (variable) [(index) |.Count] 

其 中 参数 的 含义 如 下 。 

variable: 是 HTTP 指 定 要 查询 字符 串 的 变量 名 。 

index: 是 可 选 参数 ， 使 用 该 参数 可 以 访问 某 参 数 中 多 个 值 中 的 1 个 ， 它 可 以 是 1 到 Request. 
QueryString (parameter) Count 之 间 的 任意 整数 。 

count: 指明 变量 值 的 个 数 ， 可 以 调用 “Request.QueryString (variable) Count” 来 确定 。 

可 看 出 QueryString 集 合 与 Form 集 合 的 使 用 方法 类 似 ， 而 区 别 在 于 : 对 于 客户 端 用 GET 传 送 
的 数据 ， 使 用 QueryString 集 合 提取 数据 ， 而 对 于 客户 端 用 POST 传送 的 数据 ， 使 用 Form 集 合 提 
取 数据 。 一 般 情 况 下 ， 大 量 数据 使 用 POST 方法 ， 少 量 数据 才 使 用 GET 方 法 。 
友 Server Variables 

Server Variables 是 用 来 存储 环境 变量 及 http 标 题 (Header) 。 


响 12.3.2 属性 
Request 对 象 只 有 一 个 属性 Total Bytes， 表 示 从 客户 端 接收 数据 的 字 节 长 度 ， 其 语法 格式 
如 下 。 


Request. Total Bytes 
转 12.3.3 方法 

Request 对 象 只 有 一 个 方法 Binary Read。Binary Read 方 法 是 以 二 进 制 方式 来 读 取 客户 端 使 用 
Post 方 式 所 传递 的 数据 。 其 语法 如 下 。 

数组 名 二 Request. Binary Read (数值 ) 
旧 12.3.4” ”Request 对 象 使 用 实例 

下 面 通过 一 个 实例 讲述 Request 对 象 的 使 用 方法 ， 这 里 创建 两 个 文件 ， 一 个 表单 提交 页 面 
1.asp， 一 个 提交 表单 处 理 页 面 2.asp。 
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1. asp 的 代码 如 下 。 


在 浏览 器 中 浏览 效果 如 图 12-3 所 示 。 
上 | 下 | ep:AL el 
请 输入 你 的 姓名 : 一] 
请 选择 你 的 性 别 : 允 司 
国 引 


et st FR ed} 


图 12-3 表单 提交 页 面 


2. asp 的 代码 如 下 。 
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response.write ("你 没有 输入 姓名 .") 


end if$%> 
当 在 图 12-3 所 示 的 表单 提交 页 面 输入 相关 信息 ， 单 击 “ 提 交 ” 按 钮 后 ， 进 入 2.asp 页 面 ， 效 
果 如 图 12-4 所 示 。 
起 址 国 |。 Mttp-//2.asp € E | > [Wed 
欢迎 你 , 王 晓 民 先生 ! 


Bg 图 Internet 


图 12-4 ”代码 执行 效果 


与 Request 是 获取 客户 端 HTTP 信 息 相反 ，Response 对 象 的 主 
要 功能 是 将 数据 信息 从 服务 器 端 传送 数据 至 客户 端 浏览 器 。 


器 12.4.1 集合 对 象 

Response 对 象 只 有 一 个 数据 集合 ， 就 是 Cookies。 它 用 来 在 Client 端 写 入 相关 数据 ， 以 便 以 
后 使 用 。 它 的 语法 如 下 。 

Response. Cookies(Cookies 的 名 字 ) 二 Cookies 的 值 

注意 : Response.Cookies 语 句 必须 放 在 ASP 文 件 的 最 前 面 ， 也 就 是 <html> 之 前 ， 否 则 将 发 生 


Response 对 象 中 有 很 多 属性 ， 如 表 12-1 所 示 。 
表 12-1 Response 对 象 的 常见 属性 


属性 说 明 
Buffer 指定 是 否 使 用 缓冲 页 输出 
ContentType 间 定 响应 的 HTML 内 容 类 型 
Expires 旨 定 在 浏览 器 上 缓冲 存储 的 页 面 离 过 期 还 有 多 长 时 间 
ExpiresAbsolute 指定 缓存 于 浏览 器 中 的 页 面 的 确切 到 期 日 期 和 时 间 
Status 用 来 处 理 服务 器 返回 的 错误 
IsClientConnected 只 读 属性 ， 用 于 判断 客户 端 是 否 能 与 服务 器 相连 


肯 12.4.3 方法 
Response 对 象 的 方法 包括 Write、Redirect、Clear、End、Flush、BinaryWrite、AddHeader 和 
AppendToLog 等 共 8 种 ， 表 12-2 为 Response 对 象 的 常见 方法 。 
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表 12-2 Response 对 和 象 的 常见 方法 


再 法 说 明 
Write 将 指定 的 字符 串 写 到 当前 的 HTML 输出 
Redirect 使 浏览 器 立即 重 定向 到 指定 的 URL 
Clear 清除 缓冲 区 中 的 所 有 HTMI 输 出 
End 使 Web 服 务 器 停止 处 理 脚本 并 返回 当前 结果 
Flush 立即 发 送 缓冲 区 的 输出 
BinaryWrite 不 经 任何 字符 转换 就 将 指定 的 信息 写 到 HTML 输 出 
AddHeader 用 指定 的 值 添加 HTML 标题 
Appendtolog 在 Web 服 务 器 记录 文件 末尾 加 入 用 户 数据 记录 


旧 12.4.4 ”Response 对 象 使 用 实例 
Write 方法 是 Response 对 象 最 常用 的 方法 ， 它 可 以 把 数据 信息 从 服务 器 端 发 送 到 客户 端 ， 在 
客户 端 动态 地 显示 信息 。 下 面 通过 范例 讲述 Response 对 象 的 使 用 ， 其 代码 如 下 。 


这 里 使 用 Response.Write 方 法 输出 客户 信息 ， 在 浏览 器 中 浏览 效果 ， 如 图 12-5 所 示 。 
| 试 会 [区 wawmsagsm [| 全- 日- 夫人 TRO- | 


你 好 。 
我 叫 孙 晨 1 
我 今年 20 岁 ” 


图 12-5 ” Response 对象 的 使 用 


7 5 P= 


Server 对 象 在 ASP 中 是 一 个 很 重要 的 对 象 ， 许 多 高 级 功能 都 
是 靠 它 完成 的 。 
Server 对 象 的 使 用 语法 为 : 
191 


ET 识 堂 实录 。。 一 全 


Server 方 法 | 属性 
下 面 将 对 Server 对 象 的 属性 和 方法 进行 简单 的 介绍 。 
胃 12.5.1 属性 
ScriptTimeout 属 性 用 来 限定 一 个 脚本 文件 执行 的 最 长 时 间 。 也 就 是 说 ， 如 果 脚 本 超过 时 间 


限度 还 没有 被 执行 完毕 ， 将 会 自动 中 止 ， 并 且 显 示 超时 错误 。 

其 使 用 语法 为 : 

Server.ScriptTimeout—n 

参数 n 为 设置 的 时 间 ， 单 位 为 秒 ， 上 默认 的 时 间 是 90 秒 。 参 数 n 设 置 不 能 低 于 ASP 系 统 设置 中 
的 默认 值 ， 否 则 系统 仍然 会 以 默认 值 当 作 ASP 文 件 执行 的 最 长 时 间 。 

例如 将 某 个 脚本 的 超时 时 间 设 为 4 分 钟 。 

server.ScriptTimeout=240 

提示 fm 

上 这 个 设置 必须 放 在 ASP 文 件 的 最 前 头 ， 否 则 会 产生 错误 。 
| 
咽 12.5.2 方法 

Serverc 对 象 的 常见 方法 包括 Mappath、HTMLEncode、URLEncode 和 CreateObject 等 4 种 。 表 
12-3 所 示 为 Server 对 象 的 方法 。 


表 12-3 ”Server 对 象 的 方法 


将 指定 的 相对 虚拟 路 径 映射 到 服务 器 上 相应 的 物理 目录 
对 指定 的 字符 串 应 用 HTML 编码 

将 一 个 指定 的 字符 串 按 URL 的 编码 输出 

用 于 创建 已 注册 到 服务 器 上 的 ActiveX 组 件 的 实例 


Mappath 


HIMLEncode 


URLEncode 


CreateObject 


Application 对 象 是 一 个 应 用 程序 级 的 对 象 ， 利 用 Application 
对 象 可 以 在 所 有 用 户 间 共 享 信息 ， 并 且 可 以 在 Web 应 用 程序 运行 期 间 持久 地 保存 数据 。 
Application 对 象 用 于 存储 和 访问 来 自任 何 页 面 的 变量 ， 类 似 于 session 对 象 。 不 同 之 处 在 


于 ， 所 有 的 用 户 分 享 一 个 Application 对 象 ， 而 session 对 象 和 用 户 的 关系 是 一 一 对 应 的 。 


嘲 12.6.1 方法 

Application 对 象 只 有 两 种 方法 ， 即 Lock 方 法 和 UnLock 方 法 。Lock， 主 要 用 于 保证 同一 
时 刻 只 有 一 个 用 户 在 对 Application 对 象 进行 操作 ， 也 就 是 说 使 用 Lock 方 法 可 以 防止 其 他 用 
户 同时 修改 Application 对 象 的 属性 ， 这 样 可 以 保证 数据 的 一 致 性 和 完整 性 。 当 一 个 用 户 调用 
一 次 Lock 方 法 后 ， 如 果 完 成 任务 ， 应 该 使 用 UnLock 方 法 将 其 解 开 以 便 其 他 用 户 能 够 访问 。 
UnLock 方 法 通常 与 Lock 方 法 同时 出 现 ， 用 于 取消 Lock 方 法 的 限制 。Application 对 象 的 方法 及 
说 明 如 表 12-4 所 示 。 
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表 12-4 Application 对 象 的 方法 


方法 说 明 
Lock0 锁定 Application 对 象 ， 使 得 只 有 当前 的 ASP 页 面 对 内 容 能 够 进行 访问 
UnlockO 解除 对 在 Application 对 象 上 的 ASP 网 页 的 锁定 


为 什么 要 锁定 数据 呢 ? 因为 Application 对 象 所 储存 的 内 容 是 共享 ， 有 异常 情况 发 生 时 ， 
如 果 没 有 锁定 数据 会 造成 数据 不 一 致 的 状况 发 生 ， 并 造成 数据 的 错误 。Lock 与 Unlock 的 语法 
如 下 : 


例如 : 


以 上 的 sy 变量 在 程序 执行 “+sj ”时 会 被 锁定 住 ， 其 他 欲 更 改 sy 变 量 的 程序 将 无 法 更 改 它 ， 
直到 锁定 解除 为 止 。 
用 12.6.2 事件 


Application 对 象 提供 了 在 它 启动 和 结束 时 触发 的 两 个 事件 ，Application 对 象 的 事件 及 说 明 
如 表 12-5 所 示 。 


表 12-5 Application 对 象 的 事件 


方法 说 明 
OnStart 当 ASP 启 动 时 触发 


OnEnd 当 ASP 应 用 程序 结束 时 触发 


Application-OnStart 就 是 在 Application 开 始 时 所 触发 的 事件 ， 而 Application-OnEnd 则 是 在 
Application 结 束 时 所 触发 的 事件 。 那 它们 怎么 用 呢 ? 其 实 这 两 个 事件 是 放 在 Global.asa 当 中 ， 用 
法 也 不 像 数据 集合 或 属性 那样 是 “对 象 .数据 集合 ”或 “对 象 .属性 ”， 而 是 以 子 程序 的 方式 存 
在 。 它 们 的 格式 是 : 


例如 下 Application 对 象 的 事件 使 用 实例 。 
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在 这 里 用 到 了 Application-OnStart 事 件 。 可 以 看 到 将 这 两 个 变量 放 在 Application-OnStart 中 
就 是 让 Application 对 象 一 开始 就 有 Today 和 Times 这 两 个 变量 。 


@ 


可 以 使 用 Session 对 象 存储 特定 客户 的 Session 信 息 ， 即 使 
该 客户 端 由 一 个 Web 页 面 到 另 一 个 Web 页 面 ， 该 Session 信 息 仍 然 存 在 。 与 Application 对 象 相 
比 ，Session 对 象 更 接近 于 普通 应 用 程序 中 所 说 的 全 局 变量 。 用 Session 类 型 定义 的 变量 可 同时 
供 打 开 同 一 个 Web 页 面 的 客户 共享 数据 ， 但 两 个 客户 之 间 无 法 通过 Session 变 量 共享 信息 ， 而 
Application 类 型 的 变量 则 可 以 实现 该 站 点 的 多 个 用 户 之 间 在 所 有 页 面 中 的 共享 信息 。 
在 大 多 数 情况 下 ， 利 用 Application 对 象 在 多 用 户 间 共 享 信息 ; 而 Session 变 量 作为 全 局 变 
量 ， 用 于 在 同一 用 户 打开 的 所 有 页 面 中 共享 数据 。 


胃 12.7.1 属性 


Session 对 象 有 两 个 属性 : SessionID 和 Timeout， 如 表 12-6 所 示 。 
表 12-6 ”Session 的 属性 


返回 当前 会 话 的 唯一 标志 ， 它 将 自动 地 为 每 一 个 Session 分 配 不 同 的 ID 
(编号 ) 


SessionID 


Timeout 


定义 了 用 户 Session 对 象 的 最 长 执行 时 间 


转 12.7.2 方法 


Session 对 象 只 有 一 个 方法 ， 就 是 Abandon。 它 是 用 来 立即 结束 Session 并 释放 资源 。 
Abandon 的 语法 如 下 : 
一 Session.abandon 


目 12.7.3 ”事件 一 


Session 对 象 也 有 两 个 事件 :Session OnStart 和 Session OnEnd， 其 中 Session_Start 事 件 是 在 
第 1 次 启动 Session 程 序 时 触发 此 事件 ， 即 当 服务 器 接收 到 对 ActiveServer 应 用 程序 中 的 URL 的 
HTTP 请 求 时 ， 触 发 此 事件 并 建立 Session 对 象 ; Session OnEnd 事 件 是 在 调用 Session.Abandon 方 
法 时 ， 或 者 在 Timeout 的 时 间 内 没有 刷新 时 触发 此 事件 。 

这 两 个 事件 的 用 法 和 Application.OnStart 及 Application.OnEnd 类 似 ， 都 是 以 子 程序 的 方式 放 
在 Globalasa 当 中 。 语 法 如 下 : 
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用 12.7.4 ， Session 对象 实例 一 一 一 一 一 一 一 一 一 一 一 0 
下 面 范例 是 Session 的 Contents 数 据 集合 的 使 用 ， 其 代码 如 下 。 


在 浏览 器 中 浏览 效果 如 图 12-6 所 示 。 


= ea: 全 -日 - 党 -已 Ww -全 TRO- 


sessionID:330838694 
用 户 名 称 : 孙 晨 

年 擒 :18 

证 件 号 ，54235 

用 户 数据 库 此 页 无 法 显示 。 


图 12-6 。 Session 对 象 实例 
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一 、 填 空 题 

1. ASP 是 府 入 网 页 中 的 一 种 脚本 语言 ， 它 可 以 是 HTML 标 记 、 文 本 和 脚本 命令 的 任意 组 
合 。ASP 文 件 名 的 格式 是 ”而 不 是 传统 的 .htm。 

2. 对象 的 作用 是 与 客户 端 交 互 ， 收 集 客户 端的 Form、Cooks、 超 链接 、 或 者 
收集 服务 器 端的 环境 变量 。 

3. 对象 是 一 个 应 用 程序 级 的 对 象 , 利用 对 象 可 以 在 所 有 用 户 间 
共享 信息 ， 并 且 可 以 在 Web 应 用 程序 运行 期 间 持久 地 保存 数据 。 

4. 可 以 使 用 “对象 存储 特定 客户 的 信息 ， 即 使 该 客户 端 由 一 个 Web 页 面 到 另 一 
个 Web 页 面 ， 该 信息 仍然 存在 。 
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本 章 主要 介绍 了 ASP 的 基本 概念 ，ASP 创 建 数 据 库 连接 ， 
ASP 存 取 数 据 ， 使 用 RecordSet 对 象 等 。ASP 提 供 了 可 在 脚本 中 使 用 的 内 部 对 象 。 这 些 对 象 使 用 
户 更 容易 收集 通过 浏览 器 请 求 发 送 的 信息 、 响 应 浏览 器 以 及 存储 用 户 信息 ， 从 而 使 网 站 开发 者 
摆脱 了 很 多 繁琐 的 工作 ， 提 高 了 编程 效率 。 
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第 13 章 
快速 掌握 动画 设 
计 软 件 Flash CC 


本 章 导读 
Adobe Flash Professional CC 是 用 于 动画 制作 和 
多 媒体 创作 及 交互 式 设计 网 站 的 强大 的 项 级 创作 平 
台 。 软 件 内 含 强大 的 工具 集 ， 具 有 排版 精确 、 版 面 保 


真 和 丰富 的 动画 编辑 功能 ， 能 帮助 您 清晰 地 传达 创作 
构思 。 


技术 要 点 

克 Flash CC 简介 

友 ”Flash 动 画 的 制作 

交 ”Flash 动 画 的 优化 与 发 布 
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Flash 的 功能 很 广泛 ， 可 以 生成 动画 、 创 建 网 页 互动 性 ， 以 及 
在 网 页 中 加 入 声音 ， 还 可 以 生成 亮丽 夺目 的 图 形 和 界面 。 


器 13.1.1 Flash 应 用 范围 

Flash 互 动 内 容 已 经 成 为 创造 网 站 活力 的 标志 ， 应 用 Flash 技 术 与 电视 、 广 告 、 卡 通 、MTV 
等 应 用 相 结 合 ， 进 行商 业 推广 ， 把 Flash 从 个 人 爱好 推广 为 一 种 阳光 产业 ， 渗 透 到 音乐 、 传 媒 、 
广告 和 游戏 等 各 个 领域 ， 开 拓 发 展 无 限 的 商业 机 会 。 其 用 途 主要 有 以 下 几 个 方面 。 
1 个 性 化 网 页 布局 ， 丰 富 网 站 样式 表 

随 着 计算 机 技术 的 发 展 和 网 站 访问 者 的 多 样 化 ， 单 一 的 网 页 布局 形式 已 经 不 能 满足 用 户 需 
求 。 个 性 化 的 网 页 布局 形式 必 将 成 为 网 站 发 展 的 方向 。 就 目前 固定 式 网 页 布局 形式 所 存在 的 一 
些 问 题 ， 提 出 利用 Flash 交 互 技术 和 CSS 技 术 实 现 网 页 个 性 化 布局 的 思路 和 方法 。 
2. Flash 动 画 技 术 的 交互 性 动画 在 数字 媒体 中 的 应 用 

随 着 我 国 数字 技术 、 通 信 技 术 与 网 络 技术 的 不 断 发 展 及 数字 化 时 代 的 到 来 ， 各 种 数字 化 媒 
体 平台 的 不 断 推 出 与 应 用 ， 使 得 数字 媒体 成 为 了 交互 性 动画 得 以 发 展 和 应 用 的 “新 天 地 ”。 基 
于 Flash 动 画 技术 的 交互 性 动画 在 众多 媒体 平台 得 到 了 快速 的 发 展 与 应 用 。 以 互联 网 络 和 手机 媒 
体 为 传播 平台 的 网 络 交互 动画 和 手机 动画 也 得 到 了 快速 的 发 展 ， 给 人 们 的 生活 带 来 巨大 便利 。 
3.， FLASH 与 数据 库 交 互 及 发 布 技术 

自 上 个 世纪 90 年 代 macromedia 公 司 推出 Flash 软 件 以 来 ， 无 数 网 页 设计 者 使 用 这 一 工具 创作 
出 既 漂 亮 又 奇特 的 电脑 作品 。Flash 迅 速成 为 全 球 流行 的 电脑 动画 设计 软件 ， 近 年 来 ， 不 仅 是 网 
页 设计 ， 更 有 越 来 越 多 的 应 用 程序 也 采用 Flash 来 进行 开发 ，Flash 可 以 结合 loadVariables、XML 
和 SQL Server 等 进行 数据 库 交 互动 画 设计 。 
4. Flash 交 互动 画 辅 助教 学 

人 机 交互 技术 的 进展 为 多 媒体 教学 提供 了 广泛 应 用 的 技术 和 工具 ， 过 去 很 难 讲 清 的 概念 、 
定理 、 现 象 或 自然 规律 ， 现 在 可 通过 多 媒体 课件 进行 生动 的 辅助 教学 。 学 生还 可 以 通过 课件 进 
行 自 学 、 自 练 、 自 测 ， 从 而 大 大 减轻 了 教师 的 工作 量 。 

Flash 是 一 个 很 好 的 多 媒体 课件 开发 工具 。 由 于 其 在 课件 开发 方面 表现 出 的 简单 、 高 效 、 功 
能 强大 等 特性 ， 目 前 已 成 为 中 小 学 课件 开发 的 首选 工具 之 一 。 
5. Flash 项 目 与 数据 库 通信 的 研究 一 一 基于 ASP.NET 技 术 

Flash 适 用 范围 广 ， 如 网 站 、 广 告 、 游 戏 、 程 序 、 多 媒体 演示 等 。 应 用 实体 多 ， 如 手机 游 
戏 、 触 摸 屏 广告 、 电 子 书 、 视 频 录 像 、 视 频 会 议 、 电 视 媒体 等 ， 用 Flash 开 发 的 项 目 导 出 文件 
小 ， 但 表现 的 动画 角色 非常 形象 生动 ， 适 合 网 络 传输 ; Flash 的 AS 代码 非常 强大 ， 交 互 性 强 ， 
并 能 与 其 他 程序 语言 灵活 读 取 。 但 Flash 不 能 直接 对 数据 库 进行 操作 ， 限 制 了 Flash 项 目 内 容 的 
维护 和 更 新 ， 解 决 这 个 问题 的 传统 方法 是 Flash 借 助 ASP 技 术 实 现 与 数据 库 之 间 的 通信 ; 由 于 
ASP 技 术 存 在 许多 缺陷 ， 正 在 被 新 一 代 的 动态 网 页 实现 技术 (ASPNET) 所 取代 。 
6. Flash 交 互动 画 在 电子 技术 网 络 课程 中 的 应 用 

远程 教育 是 现代 教育 新 的 发 展 方向 ， 网 络 课程 的 内 容 应 当 充 分 利用 Intermet 的 优势 ， 提 高 自 
身 的 质量 。 本 文 描述 了 在 模拟 电子 技术 网 络 课程 制作 中 ， 使 用 Flash 制 作 交 互 式 动画 来 提高 课程 
质量 的 方法 。 对 于 一 些 具体 的 技术 ， 比 如 正弦 曲线 的 画 法 ， 以 及 与 用 户 的 交互 等 ， 网 络 课程 的 
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建设 背景 随 着 Internet 的 飞速 发 展 ， 产 生 了 远程 教育 模式 。 这 是 现代 教育 的 一 个 发 展 方向 。 网 络 
课程 作为 远程 教育 的 基础 ， 其 质量 的 优 劣 直接 影响 到 教学 的 效果 。 
7. Flash 在 多 媒体 课件 制作 中 的 应 用 
随 着 Flash 动 画 在 互联 网 络 中 的 广泛 应 用 ， 以 Flash 为 主 的 二 维 矢量 动画 由 于 具有 易于 传输 
和 交互 性 强 等 各 种 优点 ， 被 越 来 越 多 地 应 用 于 各 种 行业 。 目 前 在 教育 行业 中 ，Flash 动 画 技术 已 
5 其 他 计算 机 图 形 图 像 处 理 技术 一 起 成 为 现代 多 媒体 教育 的 重要 开发 工具 。Flash 二 维 动画 技术 
在 现代 化 教学 的 数字 图 像 处 理 中 大 量 应 用 ， 不 断 向 多 元 化 、 科 技 化 发 展 。 多 媒体 教学 是 现代 化 
教学 的 一 个 重要 环节 。 实 现 多 媒体 教学 的 技术 较 多 ， 其 中 二 维 动画 技术 是 比较 先进 和 功能 强大 
的 技术 之 一 。 
8. 基于 Flash+XML 的 多 媒体 电子 教学 地 图 
目前 ， 应 用 于 地 理 教 学 的 电子 教学 地 图 缺乏 动态 效果 与 交互 功能 ， 而 专业 电子 地 图 实 
技术 难度 大 、 开 发 维护 成 本 高 ， 且 缺乏 教育 教学 应 用 性 ， 不 利于 在 实际 的 教学 中 大 范围 推广 
。 针 对 以 上 次 端 ，Flash 技 术 相对 于 WebGIS 技 术 的 优势 ， 应 用 Flash+XML 技 术 ， 可 以 开发 
学 信息 全 面具 体 、 交 互 功 能 强大 、 符 合 中 学 生 认 识 学 习 规律 的 多 媒体 电子 教学 地 图 。 


旧 13.1.2 Flash CC 工作 界面 


Adobe Flash Professional CS6 软 件 内 含 强 大 的 工具 集 ， 具 有 排版 精确 、 版 面 保 真 和 丰富 的 动 
画 编辑 功能 ， 能 清晰 地 传达 创作 构思 。Flash CS6 的 工作 界面 由 菜单 栏 、 工 具 箱 、 时 间 轴 、 和 舞台 
和 面板 等 组 成 ， 如 图 13-1 所 示 。 


图 13-1 Flash CS6 的 工作 界面 


| 3. Es 
2 学 习 Flash 的 基础 知识 ， 深 入 理解 这 些 基础 功能 ， 是 掌握 


Flash 的 关键 。 
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中 13.2.1 ”Flash 的 优点 


Flash 以 其 强大 的 功能 ， 易 于 上 手 的 特性 ， 得 到 了 广大 用 户 的 认可 ， 甚 至 于 疯狂 的 热爱 。 很 
多 人 已 投入 到 Flash 动 画 的 制作 中 。 作 为 一 款 动画 制作 软件 ，Flash 与 其 他 动画 制作 软件 有 很 多 
相似 的 地 方 ， 但 也 有 很 多 特点 ， 正 是 这 些 特点 成 就 了 Flash 在 动画 领域 的 王者 地 位 。 

1. 文件 占用 空间 小 ， 传 输 速度 快 

Flash 动 画 的 图 形 系 统 是 基于 矢量 技术 的 ， 因 此 下 载 一 个 Flash 动 画 文件 的 速度 很 快 。 矢 量 
技术 只 需 存 储 少量 数据 就 可 以 描述 一 个 相对 复杂 的 对 象 ， 与 以 往 采 用 的 位 图 相 比 ， 数 据 量 大 大 
下 降 了 ， 只 有 原先 的 几 千 分 之 一 ， 因 此 比较 适合 在 因特网 中 使 用 ， 它 有 效 地 解决 了 多 媒体 与 大 
数据 量 之 间 的 矛盾 。 

2. 强大 的 交互 功能 

在 Flash 中 ， 高 级 交互 事件 的 行为 控制 使 Flash 动 画 的 播放 更 加 精确 并 容易 控制 。 设 计 者 可 
以 在 动画 中 加 入 滚动 条 、 复 选 框 、 下 拉 菜 单 和 拖 动 物体 等 各 种 交互 组 件 。Flash 动 画 甚至 可 以 
与 Java 或 其 他 类 型 的 程序 融合 在 一 起 ， 在 不 同 的 操作 平台 和 浏览 器 中 播放 。Flash 还 支持 表单 交 
互 ， 使 得 包含 Flash 动 画 表单 的 网 页 可 应 用 于 流行 的 电子 商务 领域 。 

3. 矢量 绘图 ， 可 无 极 放大 
于 矢量 图 形 的 特点 ， 使 得 Flash 做 到 了 真正 的 无 极 放 大 ， 放 大 几 倍 几 百倍 都 一 样 的 清晰 ， 
无 论 用 户 的 浏览 器 使 用 多 大 的 窗口 ， 都 不 会 降低 画面 质量 。 

一 般 的 网 页 动画 图 像 是 基于 点 阵 技术 的 位 图 图 像 ， 这 种 图 像 由 大 量 的 像素 点 构成 ， 比 较 逼 
真 ， 但 灵活 性 较 差 ， 并 且 在 对 图 像 进行 放大 时 ， 由 于 点 与 点 之 间距 离 的 增加 ， 图 像 的 品质 会 有 
较 大 幅度 的 降低 ， 会 产生 锯齿 状 的 像素 块 。 而 Flash 最 重要 的 特点 之 一 便 是 能 用 矢量 绘图 ， 只 需 
要 少量 的 矢量 数据 就 可 以 很 好 地 描述 一 个 复杂 的 对 象 。 由 于 位 图 图 像 是 由 像素 组 成 的 ， 因 此 其 
体积 非常 大 ; 而 矢量 图 像 仅 由 线条 和 线条 所 封闭 的 填充 区 域 组 成 ， 体 积 非常 小 。 此 外 ，Flash 动 
画 采用 “ 流 式 ” 播 放 技 术 ， 在 观看 动画 时 可 以 不 必 等 到 动画 文件 全 部 下 载 到 本 地 后 才能 观看 ， 
而 可 以 边 观看 边 下 载 ， 从 而 减少 了 等 待 的 时 间 。 

4. 动画 的 输出 格式 

Flash 是 一 个 优秀 的 图 形 动画 文件 的 格式 转换 工具 ， 它 可 以 将 动画 以 GIF、QnuickTime 和 AVI 
的 文件 格式 输出 ， 也 能 以 帧 的 形式 将 动画 插入 到 Director 中 去 。 

5. 界面 友好 ， 易 于 上 和 手 

Flash 不 但 功能 强大 ， 界 面 布局 也 很 合理 ， 使 得 初学 者 可 以 在 很 短 的 时 间 内 就 熟悉 它 的 工作 
环境 。 同 时 软件 附带 了 详细 的 帮助 文件 和 教程 ， 并 有 示例 文件 供用 户 研究 学 习 。 

Flash 将 矢量 图 形 与 位 图 、 声 音 和 脚本 控制 巧妙 地 结合 ， 能 创作 出 效果 绚丽 多 彩 的 动画 。 
6. 可 扩展 性 

通过 第 三 方 开发 的 Flash 插 件 程序 ， 可 以 方便 地 实现 一 些 以 往 需要 非常 繁琐 的 操作 才能 实现 
的 动态 效果 ， 大 大 提高 了 Flash 影 片 制作 的 工作 效率 。 


用 13.2.2 建立 与 保存 Flash 动 画 


Flash CC 对 文档 的 操作 与 其 他 软件 类 似 ， 具 体 包括 文档 的 新 建 、 保 存 和 打开 等 ， 下 面 来 简 
单 的 介绍 一 下 Flash 动 画 的 建立 与 保存 。 具 体操 作 步 骤 如 下 。 
国 启动 软件 后 ， 出 现 一 个 新 文档 界面 ， 如 图 13-2 所 示 。 
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固 执行 “文件 ”| “新 建 ”命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 如 图 13-3 所 示 。 


各 条 开 民 再 的 项 日 


图 13-2 启动 软件 图 13-3 “新 建文 档 ” 对 话 框 
国 在 对 话 框 中 选择 Flash 文 件 后 ， 单 击 “ 确 定 ” 按 钮 ， 即 可 新 建 一 个 文档 ， 如 图 13-4 所 示 。 


园 执行 “文件 ”| “保存” 命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 对 话 框 中 的 “文件 名 ”文本 框 中 输入 
文件 名 ， 如 图 13-5 所 示 。 


图 13-4 新 建文 档 图 13-5 “另存 为 ”对 话 杠 


肯 13.2.3 ”设置 Flash 的 属性 


在 Flash 的 “文档 属性 ”对 话 框 中 可 以 设置 文档 大 小 、 文 档 的 背景 颜色 、 设 置 帧 频率 等 ， 下 
面 就 详细 讲述 文档 属性 的 设置 。 
1. 设置 文档 大 小 
执行 “修改 ”|“ 文 档 ” 命 令 ， 弹 出 “文档 设置 ”对 话 框 ， 在 “尺寸 ”文本 框 中 输入 相应 的 
数值 ， 即 可 设置 舞台 的 大 小 ， 如 图 13-6 所 示 。 
2. 设置 背景 颜色 
单 击 “ 背 景 颜色 ”后 面 的 按钮 ， 在 弹出 的 颜色 列表 中 可 以 设置 舞台 的 背景 颜色 ， 如 图 13-7 
所 示 。 
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图 13-6 ”设置 文档 大 小 图 13-7 设置 背景 颜色 

3. 设置 帧 频率 

在 “ 帧 频 ” 文 本 框 中 可 以 输入 每 秒 要 显示 的 动画 帧 数 。 帧 数 越 大 ， 动 画 显 示 越 快 ， 帧 数 越 
少 ， 动 画 显 示 越 慢 ， 如 图 13-8 所 示 。 
4. 使 用 属性 面板 设置 属性 
使 用 “属性 ”面板 和 “浮动 ”面板 组 ， 可 以 查看 或 组 合 或 更 改 资 源 及 其 属性 。 可 以 根据 视 
图 的 需要 来 显示 /隐藏 面板 和 调整 面板 的 大 小 ， 也 可 以 组 合 面板 ， 并 保存 自 定义 的 面板 的 设置 ， 
从 而 更 容易 地 管理 工作 区 。 
执行 “窗口 ” |“ 属性” 命令， 可 以 打开 或 关闭 “属性 ”面板 ， 如 图 13-9 所 示 。“ 属 性 ” 面 
板 可 以 显示 当前 使 用 的 工具 和 被 选择 的 对 象 的 各 种 属性 和 参数 。 在 “属性 ”面板 中 对 可 以 当前 
使 用 的 工具 和 对 象 进行 参数 及 属性 的 设置 。 


图 13-8 设置 帧 频率 图 13-9 “属性 ”面板 


上 13.2.4 ”Flash 时 间 轴 的 使 用 
在 Flash 中 ， 时 间 轴 位 于 工作 区 的 右 下 方 ， 是 进行 Flash 动 画 创建 的 核心 部 分 。 时 间 轴 是 
层 、 帧 和 播放 头 组 成 ， 影 片 的 进度 通过 帧 来 控制 。 时 间 轴 可 以 分 为 两 个 部 分 : 左 侧 的 图 层 操 
区 和 右 侧 的 帧 操作 区 ， 如 图 13-10 所 示 。 


网 


让 


图 13-10 “时 间 轴 ”面板 
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八 13.2.5 ”插入 关键 帧 

帧 是 创建 动画 的 基础 ， 也 是 构建 动画 最 
基本 的 元 素 之 一 。 
很 明显 地 看 出 帧 与 图 层 是 一 一 对 应 的 。 

在 时 间 轴 中 ， 帧 分 为 3 种 类 型 ， 分 别 是 
通 帧 、 关 键 帧 、 空 白 关键 帧 。 
1. 普通 由 


的 作用 。 在 时 间 轴 中 ， 


间 ， 图 13-11 是 在 第 20 帧 处 插入 了 普通 帧 。 


图 13-11 插入 普通 帧 
… 空 自 关键 由 


全 和 白 关键 帧 是 
帧 是 特殊 的 关键 帧 ， 
可 以 在 其 上 绘制 图 
添加 对 象 ， 它 会 自动 转化 为 关键 帧 。 
建 图 层 的 第 1 帧 都 为 空白 关键 帧 ， 


公 13.2.6 ”创建 帧 过 渡 效 果 
补 间 动 画 是 Flash 中 最 常见 的 动画 形式 ， 


内 


它 没 有 任何 对 象 存在 ， 


也 是 高 级 动画 形式 的 基础 。 可 以 说 ， 绝 大 多 | 


数 的 Flash 动 画 都 是 建立 在 补 间 动 画 基础 上 。 
Flash 提 供 了 3 种 不 同 的 补 间 动 画 类 型 : 
动作 补 间 动画 ， 另 一 种 是 形状 补 间 动 画 。 


大 “动作 补 间 动画 是 指 在 Flash 的 时 间 帧 面板 | 
一 个 元 件 ， 然 后 | 


上 ， 在 一 个 关键 帧 上 放置 
在 另 一 个 关键 帧 改变 这 个 元 件 的 大 小 、 


字 、 位 图 、 组 


后 ， 才 可 以 做 动作 补 间 动 画 。 


| 中 绘制 图 形 后 ， 则 变 为 关键 帧 ， 
在 “时 间 轴 ”面板 中 可 以 ; 所 示 。 
| 部 对 象 删 除 ， 则 此 关键 帧 会 转化 为 空白 关 


普 | 键 帧 。 


普通 帧 起 着 过 滤 和 延长 关键 帧 内 容 显示 | 
普通 帧 一 般 是 以 空心 ; 
方 格 表示 ， 每 个 方 格 占用 一 个 帧 的 动作 和 时 | 

| 3. 关键 由 


| 画 播放 的 过 程 中 ， 关 键 帧 会 呈 


| 面板 中 插入 关键 帧 ， 
以 空心 圆 表示。 空白 关键 | 项 


形 ， 如 果 在 空白 关键 帧 中 | 


一 般 新 | 
一 旦 在 其 | 


一 种 是 | 


如 图 13-12 
同样 的 道理 ， 如 果 将 某 关 键 帧 中 的 全 


图 13-12 空白 关键 帧 


关键 帧 是 上 


来 定义 动画 变化 的 帧 。 在 动 
现 出 关键 性 的 


| 动作 或 内 容 上 的 变化 。 在 时 间 轴 中 的 关键 由 
| 显示 实心 的 小 圆 球 ， 存 在 于 此 帧 中 的 对 象 与 
| 前 后 帧 中 的 对 象 的 属性 是 不 同 的， 在 时 间 轴 
如 图 13-13 所 示 。 


图 13-13 ”关键 帧 


为 动作 补 间 过 渡 效 果 。 


SE 


中 访 甸 由 旭 [3 


图 13-14 ”动作 补 间 过 渡 效 果 


颜色 、 位 置 、 透 明度 等 ，Flash 将 自动 根 | 大 ”形状 补 间 动 画 是 在 Flash 的 时 间 帧 面板 
据 二 者 之 间 的 帧 的 值 创建 的 动画 。 动 作 补 
间 动 画 建立 后 ， 时 间 帧 面板 的 背景 色 变 为 | 
淡 兹 色 ， 在 起 始 帧 和 结束 帧 之 间 有 一 个 长 
长 的 箭头 ， 构 成 动作 补 间 动 画 的 元 素 是 元 ; 
件 ， 包 括 影片 剪辑 、 图 形 元 件 、 按 钮 、 文 | 
合 等 ， 但 不 能 是 形状 ， 只 
有 把 形状 组 合 〈Ctl+G) 或 者 转换 成 元 件 ， 
图 13-14 所 示 | 


上 ， 在 一 个 关键 帧 上 绘制 一 个 形状 ， 然 
后 在 另 一 个 关键 帧 上 更 改 该 形状 或 绘制 
一 个 形状 等 ，Flash 将 自动 根据 二 者 之 
间 的 帧 的 值 或 形状 来 创建 动画 ， 它 可 以 
实现 两 个 图 形 之 间 颜 色 、 形 状 、 大 小 、 
位 置 的 相互 变化 。 形 状 补 间 动 画 建立 
后 ， 时 间 帧 面板 的 背景 色 变 为 淡 绿 色 ， 
在 起 始 帧 和 结束 帧 之 间 也 有 一 个 长 长 的 
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箭头 ， 构 成 形状 补 间 动 画 的 元 素 多 为 用 | 太 ”显示 : 勾 选 此 复 选 框 ， 将 显示 该 图 层 

鼠标 或 压 感 笔 绘 制 出 的 形状 ， 而 不 能 是 ; 。 ”否则 将 隐藏 该 图 层 。 

图 形 元 件 、 按 钮 、 文 字 等 ， 如 果 要 使 ; 太 锁定: 勾 选 此 复 选 框 ， 将 隐藏 该 图 层 ; 

用 图 形 元 件 、 按 钮 、 文 字 ， 则 必 先 打 散 ; ”否则 将 显示 该 图 层 。 

(CCtltB) 后 才 可 以 做 形状 补 间 动 画 。 图 ; 六 类型， 用 于 设置 图 层 的 类 型 。 

13-15 所 示 为 形状 补 间 过 渡 效果 。 | 大 轮廓 颜色 : 单 击 右边 的 颜色 框 ， 在 弹出 
;的 颜色 框 中 设置 对 象 呈 轮 廓 显示 时 ， 轮 
| 廊 线 使 用 的 颜色 。 
| 妇 图 层 高 度 ， 用 于 设置 图 层 在 “时 间 轴 ?” 
| 面板 中 显示 的 高 度 。 


图 13-15 形状 补 间 过 渡 效 果 


旧 13.2.7 添加 图 层 与 图 层 管理 


使 用 图 层 可 以 很 好 地 对 舞台 中 的 各 个 对 
象 分 类 组 织 ， 并 且 可 以 将 动画 中 的 静态 元 素 | 
和 动态 元 素 分 割 开 来 ， 以 减少 整个 动画 文件 | 


的 大 小 。 | 
单 击 “ 时 间 轴 ” 面 板 底部 的 “新 建 图 | 
层 ” 按 负重 ， 即 可 在 选中 图 层 的 上 方 新 建 一 图 13-18 “图 层 属性 ”对 话 杠 


个 图 层 ， 如 图 13-16 所 示 。 


| 肯 13.2.8 ”插入 元 件 

| 元件 是 指 可 以 重复 使 用 的 图 形 、 按 钮 或 
| 动画 。 由 于 对 元 件 的 编辑 和 修改 可 以 直接 应 
| 用 于 动画 中 所 有 应 用 该 元 件 的 实例 ， 所 以 对 
| 于 一 个 具有 大 量 重复 元 素 的 动画 来 说 ， 只 要 


图 13-16 新 建 一 个 图 层 


选中 要 移动 的 图 层 ， 按 住 鼠 标 左 键 拖 ; 对 元 件 做 了 修改 ， 系 统 将 自动 地 更 新 所 有 使 
动 ， 拖 动 图 层 到 相应 的 位 置 ， 释 放 鼠 标 ， 将 | 用 工作 的 实例 
图 层 拖 动 到 合适 的 位 置 ， 此 时 移动 图 层 将 移 | 2 


动 到 图 层 1 的 下 方 ， 该 图 层 的 内 容 也 将 被 移动 | 
到 图 层 1 的 下 方 ， 如 图 13-17 所 示 。 


执行 “插入 ”| “新建 元 件 ” 命 令 或 者 
| 按 Ctrl+F8 快 捷 键 ， 弹 出 “创建 新 元 件 ” 对 
| 话 框 ， 在 对 话 框 中 的 “名 称 ”文本 框 中 输入 
| 元 件 的 名 称 ，“ 类 型 ”可 以 选择 “图 形 ”、 
| “影片 剪辑 ”、“ 按 钮 ”， 如 图 13-19 所 示 。 


= aa 


图 13-17 移动 图 层 

执行 “修改 ”| “时 间 轴 ”| “图 层 属性 ”| 
命令 ， 或 在 图 层 上 单 击 鼠 标 右键 ， 在 弹出 的 
菜单 中 选择 “属性 ”命令 ， 弹 出 “图 层 属 ， 


性 ”对 话 框 ， 如 图 13-18 所 示 。 图 13-19 “创建 新 元 件 ”对 话 框 
在 “图 层 属性 ”对 话 框 中 设置 以 下 参数 。 :大 图 形 元 件 
太 名称 : 在 文本 框 中 输入 图 层 名 称 。 | 制作 静态 图 像 ， 以 及 附属 于 主 影 片 时 间 
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轴 的 可 重用 的 动画 片段 。 

太 ”按钮 元 件 
创建 响应 鼠标 单 击 、 

交互 按钮 。 

太 影片 剪辑 


影片 剪辑 是 包含 在 Flash 影 片 中 的 影片 片 | 
段 ， 有 自己 的 时 间 轴 和 属性 。 与 图 形 元 件 的 ; 
区 别 在 于 它 支持 ActionScript 和 声音 ， 具 | 


主要 
有 交互 性 ， 是 用 途 最 广 、 功 能 最 多 的 部 分 。 
影片 剪辑 基本 上 是 
交互 控制 、 声 音 


及 其 他 的 影片 间距 的 实例 ， 


也 可 以 将 其 放置 在 按钮 元 件 的 时 间 辆 中 制作 | 


动画 按钮 。 
侦 13.2.9 库 的 管理 与 使 用 


Flash 文 档 中 的 库存 储 了 在 Flash 中 
元 件 及 导入 的 文件 ， 如 声音 剪辑 、 位 图 、 影 
片 剪辑 等 。“ 库 ”面板 显示 一 个 滚动 列表 ， 


时 查看 并 组 织 这 些 元 素 。 


外 ， 


按照 类 型 对 项 目 排序 ， 如 图 13-20 所 示 。 


图 13-20 “ 库 ” 面 板 
“ 库 ” 面板 包括 以 下 几 部 分 。 | 
六 “名 称 ”: 库 元 素 的 名 称 与 源 文件 的 文 | 
件 名 称 对 应 。 : 
太 “选项 菜单 ”: 单 击 右上 角 的 本 按钮 ， 


弹出 图 13-21 所 示 的 菜单 ， 可 以 执行 其 中 | 


的 命令 。 


在 “ 库 ” 窗 口 的 元 素 列 表 中 ， 看 见 的 文件 | 


月 过 或 其 他 动作 的 | 


i 太 执行 “插入 ”| “新 建 元 件 ”命令 。 

太 单 击 “ 库 ”面板 中 的 按钮 天， 在 弹出 
的 菜单 中 选择 “新 建 元 件 ”命令 ， 如 图 
13-22 所 示 。 


一 个 小 的 影片 ， 可 以 包含 ; 


创建 的 | 


其 中 包含 库 中 所 有 项 目的 名 称 ， 可 以 在 工作 ; 
“ 库 ” 面板 中 项 目 ; 
名 称 旁 边 的 图 标 指示 该 项 目的 文件 类 型 。 此 | 
“ 库 ” 面板 还 可 以 用 来 组 织 文件 夹 中 的 | 


库 项 目 ， 查 看 项 目 在 文档 中 的 使 用 信息 ， 并 | 1321 各 半音 国 1522 过 可“ 新 元件 ”人 人 


| 类 型 是 图 形 、 按 钮 、 影 片 剪 辑 、 媒 体 声 音 、 视 
， 频 、 字 体 和 位 图 。 前 面 3 种 是 在 Flash 中 产生 的 


元 件 ， 后 面 两 种 是 导入 素材 后 产生 的 。 
创建 库 元 件 可 以 选择 以 下 任意 一 种 操作 。 


在 “ 库 ” 面 板 中 不 需要 使 用 的 库 项 目 ， 


| 可 以 在 “ 库 ” 面板 中 对 其 进行 删除 ， 删 除 库 
| 项 目的 具体 操作 步 又 如 下 。 

| 国 执行 “窗口 " |* 库 ”命令 打开 “ 库 ” 面 板 。 
| 加 过 


中 不 需要 使 用 的 项 目 ， 单 击 鼠 标 右键 ， 在 
弹出 的 菜单 中 选择 “删除 ”命令 ， 即 可 将 
选中 的 项 目 删除 ， 如 图 13-23 所 示 。 


莫 切 
复制 


重合 名 ,~ 
Gk 


图 13-23 ”删除 项 目 
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| 3. Flash 动 画 的 优化 与 发 布 


将 制作 好 的 动画 测试 、 优 化 和 导出 后 ， 就 可 以 利用 发 布 命 令 
将 制作 的 Flash 动 画 文件 进行 发 布 ， 以 便于 动画 的 推广 和 传播 。 


虽 13.3.1 优化 动画 
Flash 作 为 动画 创作 的 专 
业 软 件 ， 操 作 简便 ， 功 能 强 
大 ， 现 已 成 为 交互 式 矢量 图 
形 和 Web 动 画 方面 的 标准 。 
但 是 ， 如 果 制 作 的 Flash 文 件 
较 大 ， 就 常常 会 让 网 上 浏览 
者 在 不 断 等 待 中 失去 耐心 。 
因此 对 Flash 进 行 优化 显得 很 
有 必要 ， 但 前 提 是 不 能 有 损 
其 播放 质量 。 
下 面 讲述 优化 Flash 动 画 
的 具体 操作 步骤 如 下 。 
国 执行 “文件 ” |“ 打开 ” 
命令 ， 打 开 文 件 “优化 动 
画 .fla”， 如 图 13-24 所 示 。 
园 执行 “文件 ”|“ 发 布设 
置 ” 命 令 ， 打 开 “ 发 布设 
置 ” 对 话 框 ， 在 该 对 话 框 
中 单 击 “Flash (.swf) ” 
选项 ， 打 开 相 应 的 参数 页 
面 ， 在 该 参数 中 设置 页 面 
的 品质 ， 如 图 13-25 所 示 。 


图 13-25 “发 布设 置 ” 对 话 框 


上 用 13.3.2 ”测试 动画 
Flash 动 画 制 作 完成 后 ， 就 可 以 将 其 导出 了 。 在 导出 或 发 布 动画 之 前 ， 应 该 对 动画 文件 进行 
测试 ， 以 检查 动画 能 否 正常 播放 。 
测试 不 仅 可 以 发 现 影响 影片 播放 的 错误 ， 而 且 可 以 检测 影片 中 片断 和 场景 的 转换 是 否 流畅 
自然 等 。 测 试 时 应 该 按照 影片 剧本 分 别 对 影片 中 的 元 件 、 场 景 和 完成 影片 等 分 步 测试 ， 这 样 有 
助 于 发 现 问题 。 在 测试 Flash 动 画 时 应 从 以 下 3 个 方面 考虑 。 
太 Flash 动画 的 体积 是 否 处 于 最 小 状态 、 能 否 更 小 一 些 。 
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友 Flash 动 画 是 否 按照 设计 思路 达到 预期 的 效果 。 
友 在 网 络 环境 下 ， 是 否 能 正常 地 下 载 和 观看 动画 。 
测试 Flash 动 画 的 具体 操作 步骤 如 下 。 


国 打开 制作 好 的 Flash 动 画 ， 执 行 “ 控 制 ”| “测试 影片 ” |“ 测试” 命令 ， 如 图 13-26 所 示 。 
加 进 择 以 后 即 可 测试 预览 动画 ， 如 图 13- 27 所 示 。 


图 13-26 打开 文件 图 13-27 测试 预览 动画 


人 肯 13.3.3 ”设置 动画 发 布 格式 


在 发 布 Flash 动 画 前 应 进行 发 布设 置 ， 执 一 一 一 
行 “ 文 件 ”|“ 发 布设 置 ” 命 令 ， 弹 出 “发 布 tO EE 
设置 ”对 话 框 ， 如 图 13-28 所 示 。 在 左 侧 的 发 
布 列表 中 可 以 选择 发 布 的 格式 。 

当 测 试 Flash 影 片 运行 无 误 后 ， 就 可 以 将 
其 发 布 为 最 终 的 SWF 播放 文件 了 。 默 认 情 况 
下 ， 使 用 “发 布 ”命令 可 以 创建 Flash SWF 
播放 文件 ， 并 将 Flash 影 片 插入 浏览 器 窗口 中 
的 HTML 文 件 中 。 

除了 以 SWF 格 式 发 布 Flash 播 放 影 片 以 
外 ， 也 可 以 用 其 他 文件 格式 发 布 Flash 影 片 ， 
如 GIF、JPEG、PNG 和 QuickTime 格 式 ， 以 及 
在 浏览 器 窗口 中 显示 这 些 文件 所 需 的 HTML 
文件 。 


图 13-28 “发 布设 置 ”对 话 框 


| 3 优化 与 发 布 文档 


将 Flash 动 画 以 HTMIL 文 件 格式 优化 发 布 的 效果 如 图 13-29 所 


示 ， 具 体操 作 步 骤 如 下 。 
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图 13-29 发布 效果 
最 终 文件 :最终 文件 /CH13/ 发 布 动画 fla 


国 打开 原始 文件 “优化 与 发 布 文档 fla”， 执 | 
行 “ 文 件 ”| “发布 设置 ”命令 ， 如 图 13-30 | 
所 示 。 
加 打开 “发 布设 置 ” 对 话 框 。 在 “发 布 ” 选 

项 卡 中 选择 “HTML 包 装 器 ”类 型 ,将 “ 品 | 
质 ”设置 为 “中 ”，“ 窗 口 模式 ”设置 为 | 
“窗口 ”， 如 图 13-31 所 示 。 单 击 “ 发 布 ” | 
按钮 ， 即 可 发 布 Flash 动 画 效果 。 


图 13-31 “发 布设 置 ”对 话 框 


13 5 课 后 练习 9 


一 、 填 空 题 
1. 在 Flash 的 “文档 属性 ”对 话 框 中 可 以 设置 、 等 。 
2. 在 Flash 中 ， 时 间 轴 位 于 工作 区 的 右 下 方 ， 是 进行 Flash 动 画 创建 的 核心 部 分 。 时 间 轴 
是 由 图 层 、 帧 和 播放 头 组 成 ， 影 片 的 进度 通过 帧 来 控制 。 时 间 轴 可 以 分 为 两 个 部 分 : 左 侧 的 
和 右 侧 的 
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Flash 动 画 以 其 特有 的 简单 易学 、 操 作 方 便 及 适应 于 网 络 等 优 
点 ， 得 到 广大 用 户 的 认可 和 接受 ， 被 广泛 应 用 于 因特网 、 多 媒体 演示 、 游 戏 及 动画 制作 等 众多 
领域 。 本 章 主 要 讲述 了 Flash CC 简介 、Flash 动 画 基础 、Flash 动 画 的 优化 与 发 布 等 。 希 望 此 简单 
的 介绍 能 激发 起 读者 对 Flash 的 兴趣 。 
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第 14 章 
编辑 文本 和 操作 对 象 


本 章 导 读 
文本 是 动画 中 很 重要 的 组 成 部 分 ， 利 用 文本 工具 可 以 
在 Flash 动 画 中 添加 各 种 文字 。 因 此 熟练 使 用 文本 工具 也 是 
掌握 Flash 的 一 个 关键 。 一 个 完整 而 精彩 的 动画 或 多 或 少 需 
要 一 定 的 文字 来 修饰 ， 而 文字 的 表现 形式 又 非常 丰富 。 合 
理 使 用 文本 工具 ， 可 以 增加 Flash 动 画 的 整体 完美 效果 ， 使 
动画 显得 更 加 丰富 多 彩 。 在 Flash 中 ， 图 形 对 象 是 舞台 中 的 
项 目 ，Flash 允 许 对 图 形 对 象 进行 各 种 编辑 操作 。Flash 提 供 
了 各 种 基本 的 操作 方法 ， 包 括 选取 对 象 、 移 动 对 象 、 复 制 
对 象 和 删除 对 象 等 。 


技术 要 点 

六 文本 的 基本 操作 

太 ”对象 的 选取 、 复 制 与 移动 
克 ”变形 处 理 
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1 4 ] 文本 的 基本 操作 


Flash 拥 有 的 强大 功能 使 其 不 仅 是 一 个 优秀 的 绘图 软件 ， 而 且 


文字 创作 方面 也 毫 不 逊色 。 运 用 它 可 以 创作 出 静止 但 却 漂亮 的 文字 ， 并 且 还 可 以 激活 和 交互 。 


国 1441. 课堂 练 一 练 一 一 创建 静态 文本 

静态 文本 就 是 在 动画 制作 阶段 创建 ， 在 动画 播放 阶段 不 能 改变 的 文本 。 在 静态 文本 框 中 ， 可 
以 创建 横 排 或 竖 排 文 本 。 输 入 静态 文本 的 效果 如 图 14-1 所 示 ， 具 体操 作 步 骤 如 下 。 

原始 文件 : 原始 文件 /CH14/ 静 态 文本 .fa 

最 终 文件 : 最 终 文 件 /CH14/ 静 态 文本 .fa 
回 新 建 Flash 文 档 ， 选 择 工具 箱 中 的 “文本 ”工具 国 ， 如 图 14-2 所 示 。 


图 14-1 衣 态 文本 图 14-2 选择 “文本 ”工具 
园 打开 “属性 ”面板 ， 在 “文本 类 型 ”下 拉 列 表 中 选择 “静态 文本 ”，“ 系 列 ” 设 置 为 “ 黑 
体 ”， 字 体 “ 大 小 ”设置 为 70， 字 体 “ 颜 色 ” 设 置 为 并 F0066， 如 图 14-3 所 示 。 
固 在 舞台 上 单 击 并 输入 文字 “儿童 玩具 ”， 如 图 14-4 所 示 。 


图 14-3 设置 文本 类 型 图 14-4 输入 文字 


210 


@ 一 e 一 第 14 章 
用 14.1.2 课堂 练 一 练 一 一 创建 动态 文本 
动态 文本 框 用 来 显示 动态 可 更 新 的 文本 。 下 面 通 过 实例 讲述 动态 文本 的 创建 ， 具 体操 作 步 


中 的 “文本 ”工具 ， 在 “属性 ”面板 中 的 “文本 类 型 ”下 拉 列 表 中 选择 “动态 文 
本 ”选项 ， 如 图 14-5 所 示 。 
园 在 文档 中 单 击 鼠 标 不 放 ， 拖 出 一 个 文本 输入 框 ， 如 图 14-6 所 示 。 


图 14-5 选择 “动态 文本 ”选项 图 14-6 输入 框 


肯 14.1.3 ”课堂 练 一 练 一 一 创建 输入 文本 
输入 文本 是 在 动画 设计 中 作为 一 个 输入 文本 框 来 使 用 ， 在 动画 播放 时 ， 输 入 的 文本 展现 更 
多 信息 。 具 体操 作 步 骤 如 下 。 
团 在 “属性 ”面板 中 的 “文本 类 型 ”下 拉 列 表 中 选择 “输入 文本 ”选项 ， 在 “线条 类 型 ”下 拉 列 
表 中 选择 “多 行 ”选项 ， 如 图 14-7 所 示 。 
园 在 文档 中 单 击 鼠 标 左 键 并 拖 出 一 个 文本 框 ， 如 


图 14-8 所 示 。 


图 14-7 设置 文本 类 型 图 14-8 拖 出 一 个 文本 杠 


对 和 象 的 选取 、 复 制 与 移动 


@ 下 面 分 别 来 讲述 移动 对 象 、 复 制 对 象 和 删除 对 象 。 


2 


ETITEEIETEE 识 党 实录 “ee®@ 


国 14.2.1 选取 对 象 


一般 而 襄 ， 对 舞 合 中 的 对 象 进行 编辑 必 ; 中 的 X 和 Y 文 本 框 中 输入 相应 的 数值 ， 然 后 按 
须 先 选择 对 象 。 因 此 选择 对 象 是 最 基本 的 操 Entcr 键 ， 即 可 将 对 象 移动 到 指定 的 位 置 ， 如 
了 图 14-10 所 示 。 

“部 | d 
分 选取 ”工具 和 “ 套 索 ”工具 。 选 择 工具 箱 | 
中 的 “选择 ”工具 ， 单 击 可 以 选取 对 象 , 如 | 


作 。 选 择 对 象 有 很 多 种 方法 。Flash 中 提供 了 
多 种 选择 工具 ， 主 要 有 “选择 ”工具 、 


网 


14-9 所 示 。 


图 14-9 选择 图 像 


有 间 14.2.2 移动 对 象 


移动 对 象 的 方法 通常 有 4 种 ， 分 别 是 利用 鼠 | 


标 、 方 向 键 、 属 性 面板 和 信息 面板 进行 移动 。 
1， 鼠 标 移动 对 象 

通过 鼠标 移动 对 象 是 最 常用 、 最 简单 的 
种 方法 。 利 用 鼠标 移动 对 象 的 具体 方法 如 下 。 


选取 一 个 或 多 个 对 象 。 将 鼠标 移动 到 回 选中 需要 复制 的 对 象 ， 执 行 “ 编 辑 ”|“ 复 
被 选中 的 对 象 上 ， 按 住 鼠 标 左 键 不 放 进 行 拖 | 
动 ， 可 以 将 对 象 移动 到 相应 的 位 置 。 如 果 在 ; 因 执行 “编辑 ”| “粘贴 ”命令 ， 或 者 按 Cl 二 
拖 动 的 同时 ， 按 住 Shif 键 不 放 ， 则 只 能 进行 | 


水 平 、 垂 直 或 45” 角 方向 的 移动 。 
2. 利用 方向 键 

使 用 鼠标 移动 对 象 的 缺点 是 不 够 精确 ， 
不 容易 进行 细微 的 操作 ， 而 使 


的 具体 方法 如 下 。 


选取 一 个 或 多 个 对 象 。 按 相应 的 方向 键 | 
(上 、 下 、 左 、 右 ) 来 移动 对 象 ， 一 次 移动 | 
1 个 像素 。 如 果 在 按 住 方向 键 的 同时 按 住 Shift 


键 ， 则 一 次 可 以 移动 8 个 像素 。 
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14.2.3 复制 对 象 


方向 键 来 移 | 
动 对 象 则 要 精确 得 多 。 利 用 方向 键 移动 对 象 


: 3， 利 用 “属性 ”面板 


选取 一 个 或 多 个 对 象 。 在 “属性 ”面板 


图 14-10 “属性 ”面板 


| 4， 利用 “信息 ”面板 移动 对 象 


选取 一 个 或 多 个 对 象 。 执 行 “ 窗 


| 口 ” 1“ 信息” 命令， 打开 “信息 ”面板 ， 如 
| 图 14-11 所 示 。 在 X 和 Y 文 本 框 中 输入 相应 的 数 
| 值 ， 然 后 按 Enter 键 ， 即 可 将 对 象 移动 到 指定 
| 的 位 置 。 


图 14-11 


“信息 ”面板 


复制 对 象 的 具体 操作 步骤 如 下 。 


制 ” 命 令 ， 或 者 按 Cul 十 C 快 捷 键 ， 复 制 对 象 。 


V 快 捷 键 ， 粘 贴 对 象 ， 如 图 14-12 所 示 。 


图 14-12 复制 对 象 


©@ oo 第 14 章 


可 以 单独 执行 变形 操作 ， 也 可 以 将 旋转 、 缩 放 、 倾 斜 和 所 
等 多 种 变形 操作 组 合 在 一 起 执行 。 


肯 14.3.1 课堂 练 一 练 一 一 缩放 对 象 

缩放 对 象 是 将 选中 的 图 形 对 象 按 比例 放大 或 缩小 ， 也 可 在 水 平 或 垂直 方向 分 别 放 大 或 缩小 

对 象 。 
缩放 对 象 可 以 选择 以 下 任意 一 种 方法 。 

太 选中 缩放 对 象 ， 将 鼠标 移动 至 矩形 框 各 边 中 点 的 控制 点 上 ， 然 后 按 下 左 键 不 放 进 行 拖 动 ， 

可 以 单独 地 调整 对 象 的 高 度 和 宽度 ， 如 图 14-13 和 图 14-14 所 示 。 


营 丝 连衣裙 


LXXXXL 
加 肥力 大 


TL=XXXXTL 
加 肥 加 天 


图 14-13 ”水平 缩 放 图 14-14 垂直 缩放 
太 选中 缩放 对 象 ， 将 鼠标 移动 至 和 矩形 框 的 4 个 项 点 上 ， 当 指针 变 为 倾斜 的 双向 箭头 形状 时 ， 按 


下 左 键 不 放 进行 拖 动 ， 可 以 同时 对 对 象 的 长 度 和 宽度 进行 缩放 ， 如 图 14-15 和 图 14-16 所 示 。 


图 14-15 缩小 图 14-16 放大 


佣 14.3.2 ”课堂 练 一 练 一 一 旋转 对 象 
旋转 对 象 的 具体 操作 步 又 如 下 。 


国 选择 工具 箱 中 的 “任意 变形 ”工具 ， 在 工具 箱 下 方 的 选项 中 按 下 “旋转 与 倾斜 ”按钮 ， 如 
14-17 所 示 。 


[出 
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回 将 鼠标 移动 到 矩形 框 项 点 旁边 ， 当 鼠标 指针 变 为 多 形状 时 ， 按 住 鼠 标 左 键 不 放 进行 旋转 ， 如 图 
14-18 所 示 。 


图 14-17 打开 文档 图 14-18 “发 布设 置 ”对 话 框 


旧 14.3.3 ”课堂 练 一 练 一 一 扭曲 对 象 

扭曲 变形 不 是 缩放 、 旋 转 等 简单 的 变形 ， 而 是 使 对 象 的 形状 本 身 发 生 本 质 性 的 变化 ， 具 体 

操作 步骤 如 下 。 

园 选择 图 像 文件 ， 执 行 “修改 ”| “分 离 ”命令 ， 分 离 图 像 ， 选 择 工具 箱 中 的 “任意 变形 ”工具 ， 
如 图 14-19 所 示 。 

园 在 下 面 的 附属 选项 中 选择 “扭曲 ”工具 ， 在 对 象 的 周围 出 现 了 控制 点 ， 用 鼠标 按照 控制 点 拖 
动 ， 可 以 扭曲 对 象 ， 如 图 14-20 所 示 。 


图 14-19 分离 图 像 图 14-20” 捏 曲 对 象 


14 4 = 


人 及 14.4.1 创建 文字 链接 
创建 文字 链接 效果 如 图 14-21 所 示 ， 具 体操 作 步 又 如 下 。 


214 


@ 一 ee 一 第 14 章 相 二 到 和 六 
国 打开 文档 “创建 文字 链接 fla”， 选 择 工具 箱 中 的 “文本 ”工具 ， 如 图 14-22 所 示 。 


图 14-21 文字 链接 图 14-22 选择 文本 工具 
固 在 图 像 上 输入 文本 “立即 抢购 ”， 如 图 14-23 所 示 。 
国 选中 文本 ， 在 “属性 ”面板 中 的 “选项 ”中 的 “链接 ”文本 框 中 输入 “http://www.qinggou. 
com”， 设 置 链接 地 址 ， 如 图 14-24 所 示 。 
园 按 Ctrl+Enter 快 捷 键 测试 影片 ， 当 鼠标 指针 指向 链接 的 文字 时 ， 鼠 标 会 变 成 手 状 ， 如 图 14-21 所 
示 ， ada 链接 的 网 站 。 


有 二 


从 /Fy -< 


A 


图 14-23 输入 文本 图 14-24 输入 连接 


人 肯 14.4.2 组合 对 象 与 分 离 对 象 
组 合 操作 涉及 对 象 的 并 组 与 解 组 两 部 

分 操作 ， 并 组 后 的 对 象 可 以 被 同时 移动 、 复 

制 、 缩 放 和 旋转 等 。 组 合 对 象 的 具体 操作 步 

又 如 下 。 

园 打开 文档 ， 按 住 Shif 键 ， 选 中 需要 组 合 的 对 
象 ， 如 图 14-25 所 示 。 


图 14-25 选中 对 象 
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园 执行 “修改 ”| “组合 ”命令 ,或 按 Ctl+G 快 捷 键 ， 将 选中 的 对 象 进行 组 合 ， 如 图 14-26 所 示 。 


如 果 要 对 单个 对 象 进行 编辑 时 ， 选 中 要 进行 
编辑 的 对 象 ， 执 行 “修改 ”|“ 取 消 组 合 ”命令 ， 


或 者 按 Ctrl+Shiftr+G 组 合 键 取消 组 合 的 对 象 。 还 有 
一 种 方法 是 在 组 合 后 的 对 象 上 双击 ， 即 可 进入 单 
个 对 象 的 编辑 状态 。 


图 14-26 组合 对 象 
使 用 分 离 命 令 ， 可 以 分 离 组 合 对 象 、 文 本 块 、 实 例 、 位 图 ， 使 之 成 为 分 离 的 可 编辑 元 素 。 
分 离 对 象 的 具体 操作 步骤 如 下 。 
国 打开 文档 ， 选 中 组 合 后 的 对 象 ， 如 图 14-27 所 示 。 
园 执行 “修改 ” |“ 分 离 ” 命 令 ， 将 组 合 的 对 象 分 离 为 间 


a 个 对 象 ， 如 图 14-28 所 示 。 


FABRIC SOFA | RS 
地 中 海风 烙 布艺 沙发 > 

: : efinl 2 
ee Ne 


va 


图 14-27 选择 对 象 图 14-28 分 离 对 象 


re » 
| 人 实战 应 用 
@ 在 动画 中 很 好 地 应 用 文字 显示 效果 ， 可 以 制作 出 具有 新 奇 


感 ， 从 而 给 人 留 下 深刻 印象 的 作品 。 


轩 14.5.1 实战 应 用 1 一 一 制作 多 彩 的 变形 文字 
下 面 制作 动画 多 彩 的 变形 文字 效果 , 如 ”区 
14-39 所 示 ， 具 体操 作 步 又 如 下 。 


到 


KE 2 
图 14-29 ”发布 效果 
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原始 文件 : 原始 文件 /CH14/ 多 彩 文字 fla 
最 终 文件 : 最 终 文件 /CH14/ 多 彩 文字 fla 


国 启动 Flash CC， 执行 “文件 ”|“ 新 


颖 


“常规 ”选项 ， 将 “ 宽 ” 设 置 为 990， 


二 “确定 ”按钮 ， 新 建 空 白文 档 ， 


人 


高 ”设置 为 900， 义 


0 


图 14-30 所 示 。 


如 


因 单 4 


14-31 所 示 。 


“新 建文 档 ” 对 话 框 


”命令 ， 打 开 “ 新 建文 档 ” 对 话 框 ， 在 该 对 话 框 中 和 


Eh 


HT 


图 14-30 图 14-31 新 建 空白 文档 
国 执行 “文件 ”| “导入 ”|“ 导 入 到 舞台 ”命令 ,打开 “导入 ”对 话 框 ， 在 该 对 话 框 中 选择 图 像 
“变形 文字 .jpg”， 如 图 14-32 所 示 。 
二 “打开 ”按钮 ， 将 图 像 导 入 到 舞台 中 ， 如 


园 单 


图 14-33 所 示 。 


wld SA 
HS(N) 6jpg » [me mar ai » 
5 
图 14-32 “导入 ”对 话 框 图 14-33 导入 图 像 
国 单 击 时 间 轴 面板 中 的 “新 建 图 层 ” 按 钮 ， 在 “图 层 1” 的 上 面 新 建 “ 图 层 2”， 如 图 14-34 所 示 。 


国 选择 工具 箱 中 的 “文本 ”工具 ， 在 舞台 中 输入 文本 “和 舒适 女 鞋 ”， 如 图 14-35 所 示 。 


人 


ph ee 
2 ee 


a 


gp WM 


图 14-35 输入 文本 
2 
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执行 两 次 “修改 ”| “分离 ”命令 ， 


国 执行 “窗口 ”| “颜色 ”命令 ,打开 
面 设置 相应 的 渐变 颜色 ， 如 图 14-37 所 示 。 


图 14-36 


四 选择 工具 箱 中 的 “任意 变形 ”工具 ， 在 其 附属 选项 中 选择 “扭曲 ”选项 


将 文本 分 离 ， 如 图 14-36 所 示 。 


分 离 文 本 图 14-37 设置 渐变 
国 设置 好 以 后 ， 即 可 对 文本 进行 填充 颜色 ， 如 图 14-38 所 示 。 


进行 相应 的 扭曲 ， 如 图 14-39 所 示 。 


图 14-38 对 文本 填充 


， 在 文档 


“颜色 ”面板 ， 将 “颜色 类 型 ”设置 为 “线性 渐变 ”， 在 下 


图 14-39 ” 捏 曲 文本 


旧 14.5.2 ”实战 应 用 2 一 一 制作 雪花 文字 
制作 雪花 文字 效果 ， 如 图 14-40 所 示 ， 具 体操 作 步 骤 如 下 。 


原始 文件 : 原始 文件 /CH14/7.jpg 


最 终 文件 : 最 终 文件 /CH14/ 雪 花 文字 .fla 
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图 14-40 ”雪花 文字 效果 


ph 即 可 对 文本 


@ 一 e 一 ”第 14 章 加 计生 区 达 世 于 要 三 3 


国 新 建 一 文档 ， 将 图 像 导入 到 舞 合 中 ， 如 图 14-41 所 示 。 
园 单 击 时 间 轴 面板 中 的 “新 建 图 层 ” 按 钮 ， 在 “图 层 1” 的 上 面 新 建 “ 图 层 2”， 如 图 14-42 所 示 。 


图 14-41 导入 图 像 图 14-42 ”新 建 图 层 
园 选择 工具 箱 中 的 “文本 ”工具 ， 在 舞台 中 输入 文本 “ 滴 眼 液 ”， 如 图 14-43 所 示 。 
园 执行 两 次 “修改 ”| “分离 ”命令 ， 将 文本 分 离 ， 如 图 14-44 所 示 。 


a 
图 14-43 输入 文本 图 14-44 ”分 离 文本 
因 选择 工具 箱 中 的 “墨水 瓶 ” 工 具 ， 在 文本 边缘 进行 点 击 ， 文 本 效果 如 图 14-45 所 示 。 
国 打开 “属性 ”面板 ， 在 面板 中 设置 笔触 为 12， 样 式 为 点 刻 线 ， 如 图 14-46 所 示 。 


图 14-45 点击 文本 图 14-46 ”设置 笔触 


| 人 A 课 后 练习 
@ 

一 、 填 空 是 
1. 在 Flash 中 包含 了 3 种 文本 对 象 ， 分 别 是 和 输入 文本 。 
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2. 移动 对 象 的 方法 通常 有 4 种 ， 分 别 是 利 | 、 和 进 
行 移动 。 
二 、 操 作 是 
制作 图 14-47 所 示 的 输入 文本 效果 。 


上 。 选择 工具 箱 中 的 “文本 ”工具 ， 在 文档 中 输入 静态 文本 ， 在 “属性 ”面板 中 的 “文本 类 型 ”下 拉 列 表 目 
是 中 选择 “输入 文本 ”选项 。 


最 终 文 件 : 最 终 文件 /CH14/ 习 题 fla 


10 月 21 日 新 品 5 折 所 首发 
Eh. 


多 不 需要 台词 


图 14-47 输入 文本 效果 
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本 章 主要 介绍 Se ter 特效 文本 的 
制作 。 读 者 应 该 学 会 使 用 文本 工具 在 工作 区 创建 文字 ， 并 会 设置 最 常见 的 文字 属性 ， 例 如 大 
小 、 颜 色 、 字 体 、 行 间距 和 字 间 距 等 ， 掌 握 文字 特效 ， 可 以 使 网 页 更 加 让 ons 
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第 1S 章 
创建 基本 Flash 动 画 


本 章 导 读 
在 Flash 中 ， 用 户 可 以 轻松 地 创建 丰富 多 
彩 的 动画 效果 。 本 章 通过 详细 的 例子 ， 主 要 介 
绍 了 Flash 中 几 种 简单 动画 的 创建 方法 ， 内 容 包 


括 逐 帧 动画 和 补 间 动 画 ， 也 包含 了 引导 动画 和 
遮 罩 动 画 这 两 种 特殊 的 动画 效果 。 


技术 要 点 
时 间 轴 与 帧 
创建 基本 动画 
创建 引导 动画 和 遮 罩 动 画 
制作 多 媒体 Flash 动 画 


PE 诬 党 实录 。。 一 令 


19. | 


动作 行为 、 控 制 命 令 及 
国 15.1.1 时 间 轴 


ETITETIETEE 


在 Flash 中 ， 时 间 轴 位 于 工作 区 的 右 下 | 
时 间 
是 由 图 层 、 帧 和 播放 头 组 成 ， 影 片 的 进度 通 ; 


方 ， 是 进行 Flash 动 画 创 建 的 核心 部 分 。 


过 帧 来 控制 。 时 间 轴 可 以 分 为 两 个 部 分 : 左 


四 15.1.2 帧 

帧 是 创建 动画 的 基础 ， 也 是 构建 动画 最 
基本 的 元 素 之 一 。 
很 明显 地 看 出 帧 与 图 层 是 一 一 对 应 的 。 

在 时 间 轴 中 ， 帧 分 为 3 种 类 型 ， 分 别 是 普 
通 帧 、 关 键 帧 、 空 白 关键 帧 。 
1. 普通 帧 


间 ， 图 15-2 所 示 是 在 第 20 帧 处 插入 了 普通 帧 。 


图 15-2 ”插入 普通 帧 
2. 空白 关键 帧 
空白 关键 帧 是 


以 空心 圆 表示 。 


帧 是 特殊 的 关键 帧 ， 它 没有 任何 对 象 存在 ， 


上， e 白 关键 帧 中 | 
一 般 新 ， 
旦 在 其 中 | 


创建 基本 动画 : 


在 Flash CC 中 ， 可 以 轻松 地 创建 丰富 多 彩 的 动画 效果 ， 并 且 
容 ， 就 可 以 在 舞台 上 制作 出 移动 对 象 、 更 改 颜色 、 旋 转 、 


添加 对 象 ， 它 会 自动 转化 为 关键 帧 。 
奸 图 层 的 第 1 术 都 为 空白 关键 核 


BO 


只 需要 通过 更 改 时 间 轴 每 一 帧 中 的 内 
淡 入 淡出 或 更 改 形状 的 效果 。 
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例 的 图 层 操作 区 和 右 便 的 帧 操作 区 ， 如 图 15-1 | 


| 绘制 图 形 后 
在 “时 间 轴 ”面板 中 可 以 ; 如 果 将 某 关键 帧 中 的 全 部 对 象 删除 ， 则 此 关 


| 键 帧 会 转化 为 空白 关键 帧 ， 如 图 15-3 所 示 。 


普通 帧 起 着 过 滤 和 延长 关键 帧 内 容 显示 | 
的 作用 。 在 时 间 轴 中 ， 普 通 帧 一 般 是 以 空心 名 
方 格 表示 ， 每 个 方 格 占用 一 个 帧 的 动作 和 时 | 
| 画 播放 的 过 程 中 ， 关 键 帧 会 
| 动作 或 内 容 上 的 变化 。 在 时 间 轴 中 的 关键 由 
| 显示 实心 的 小 圆 球 ， 存 在 于 此 帧 中 的 对 象 与 
| 前 后 帧 中 的 对 象 的 属性 是 不 同 的 ， 在 时 间 轴 
| 面板 中 插入 关键 帧 ， 如 图 15-4 所 示 。 


空 自 关键 ， 


时 间 轴 与 帧 o 


时 间 轴 是 Flash 中 最 重要 、 最 核心 的 部 分 ， 所 有 的 动画 顺序 、 
声音 等 都 是 在 时 间 轴 中 编排 的 。 


图 15-1 时 间 轴 面板 


， 则 变 为 关键 帧 。 同 样 的 道理 ， 


pe 空白 关 刍 帧 


关键 帧 是 用 来 定义 动画 变化 的 帧 。 在 动 
呈现 出 关键 性 的 


图 15-4 关键 慎 
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上 15.2.1 课堂 练 一 练 一 一 创建 逐 帧 动画 

逐 帧 动画 是 一 种 非常 简单 的 动画 方式 ， es 
不 设置 任何 补 间 ， 直 接 将 连续 的 若干 帧 都 设 
置 为 关键 帧 ， 然 后 在 其 中 分 别 绘制 内 容 ， 这 
样 连续 播放 的 时 候 就 会 产生 动画 效果 了 。 下 
面 通过 实例 的 制作 来 说 明 逐 帧 动画 的 制作 流 
程 ， 本 例 设计 的 逐 帧 动画 效果 如 图 15-5 所 示 。 | 

原始 文件 : 原始 文件 /CH15/ 逐 帧 动画 .jpg 图 15-5 逐 帧 动画 

最 终 文 件 : 最 终 文件 /CH15/ 逐 帧 动画 .Ha 
新 建 一 个 空白 文档 ， 导 入 一 张 图 像 文件 “ 逐 帧 动画 jpg”， 并 调整 图 像 的 大 小 ， 如 图 15-6 所 示 。 
园 选中 第 2 帧 ， 按 F6 键 插入 关键 帧 。 选 择 工 具 箱 中 的 “文本 ”工具 ， 然 后 在 舞 人 台中 输入 文字 
“让 ”， 在 “属性 ”面板 中 进行 其 参数 设置 ， 如 图 15-7 所 示 。 


图 15-6 导入 一 张 图 像 图 15-7 输入 文本 


园 选中 第 3 帧 ， 按 F6 键 插入 关键 帧 。 在 工具 箱 中 选择 “文本 ”工具 ， 然 后 在 舞台 中 输入 文字 
“ 科 ”， 如 图 15-8 所 示 。 


轩 分 别 在 第 4 一 8 帧 按 F6 键 插入 关键 帧 ， 并 且 分 别 输入 不 同 


SN 


的 文字 ， 如 图 15-9 所 示 。 


半 科 技 走 进 生活 


图 15-8 输入 文本 图 15-9 输入 文本 


用 15.2.2 ”课堂 练 一 练 一 一 创建 补 间 形 状 动 画 
创建 形状 补 间 动画 的 具体 操作 步骤 如 下 。 创 建 补 间 形 状 动画 效果 如 图 15-10 所 示 。 
原始 文件 : 原始 文件 /CH15/ 补 间 形 状 .jpg 
最 终 文件 ， 最终 文件 /CH15/ 补 间 形 状 .fla 
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国 新 建 一 个 空白 文档 ， 导 入 一 张 图 像 文件 “ 补 间 


形状 jpg”， 如 图 15-11 所 示 。 


图 15-10 补 间 形状 动画 图 15-11 新 建文 档 
园 按 快捷 键 ClH+B 键 分 离 图 像 ， 在 图 层 1 的 第 50 帧 按 F6 键 插入 关键 帧 ， 如 图 15-12 所 示 。 
国 选择 工具 箱 中 的 “任意 变形 ”工具 ， 在 此 单 击 图 像 文件 ， 此 时 图 像 四 周 出 现 矩 形 块 调整 ， 调 整 
图 像 的 大 小 ， 如 图 15-13 所 示 。 


网 


醒 


a 


图 15-12 ”插入 关键 帧 图 15-13 调整 图 像 大 小 
回 单 击 !-50 帧 之 间 的 任意 一 帧 ， 在 弹出 的 快捷 菜单 中 选择 “创建 补 间 形 状 ” 命 令 ， 如 图 15-14 所 示 。 
园 选择 命令 以 后 ， 创 建 形状 补 间 动 画 ， 效 果 如 图 15-15 所 示 。 保 存 动画 ， 预 览 动 画 效果 如 图 15-10 
月 


不 。 


图 15-14 选择 “创建 形状 补 间 ” 命 令 图 15-15 ”创建 形状 动画 
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上 15.2.3 ”课堂 练 一 练 一 一 创建 传统 补 间 动 画 
传统 补 间 需 要 在 一 个 点 定义 实例 的 位 置 、 


大 小 及 旋转 角度 等 属性 ， 然 后 才 可 以 在 其 他 位 

置 改变 这 些 属性 ， 从 而 由 这 些 变化 产生 动画 。 让 一 

创建 传统 补 间 动 画 效果 如 图 15-16 所 示 。 so ~ 
原始 文件 : 原始 文件 /CHI15/ 传 统 补 间 jpg、lipng 着 加 加 ) 风 所 关 是 


最 终 文件 : 最 终 文件 /CHI15/ 传 统 补 间 卫 SEE 
Wa .1 


国 新 建 一 个 空白 文档 ， 导 入 一 张 图 像 文件 “ 传 
统 补 间 .jpg”， 并 调整 图 像 的 大 小 ， 如 图 
15-17 所 示 。 

园 在 该 层 的 第 50 帧 按 F6 键 插入 关键 帧 ， 单 击 
“新 建 图 层 ” 按 钮 ， 在 “图 层 1” 的 上 面 新 
建 一 个 “图 层 2”， 如 图 15-18 所 示 。 图 15-16 传统 补 间 动 画 


"En 


“©OC 


图 15-17 导入 图 像 图 15-18 ”新建 图 层 
国 执行 “导入 ”| “导入 ”| “导入 到 舞台 ”命令 ， 导 入 图 像 liwu.png， 如 图 15-19 所 示 。 
园 在 “图 层 2” 的 第 50 帧 按 F6 键 插入 关键 帧 ， 将 图 像 往 左 移动 ， 如 图 15-20 所 示 。 


Ere 


NN 
FES 


图 15-19 导入 图 像 图 15-20 ”移动 对 象 
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园 在 1 一 50 帧 之 间 单 击 鼠标 右键 ， 在 弹出 的 菜单 中 选择 “创建 传统 补 问 动画 ”命令 ， 如 图 15-21 所 示 。 
国 选中 命令 后 ， 创 建 传统 补 间 动 画 效 果 ， 效 果 如 15-22 所 示 。 按 键盘 上 的 Ctrl+Enter 快 捷 键 测 试 动 


圈 15.3.1 


种 
的 


团 新 建 
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图 15-21 


| 5 @ 下 面 讲述 引导 


课堂 练 一 练 一 一 创建 引导 动画 


a 
:NE 
仿 ， El 


画 ， 动 画 效果 如 图 15-16 所 示 。 


选择 “创建 传统 补 间 动画 ”命令 


天 四 国 风 14 实 
名 司马 


环形 肠 兵 1638 


图 15-22 创建 传统 补 间 动 画 


创建 引导 动画 和 遮 党 动画 


在 引导 


层 中 


» 


图 形 和 引入 元 件 ， 但 最 终 发 布 时 引导 层 中 


可 以 像 其 他 层 一 样 制作 各 | 


学 


对 象 不 会 显示 出 来 ， 按 照 引导 层 的 功能 分 ; 
为 两 种 ， 分 别 是 普通 引导 层 和 运动 引导 层 。 | 
下 面 创建 一 个 引导 层 动画 ， 如 图 15-23 所 | 
示 ， 具 体操 作 步 又 如 下 。 


图 15-23 ”引导 动画 

原始 文件 : 原始 文件 /CH15/ 引 导 动 画 .ipg、 
hd.png 
最 终 文 件 : 最 终 文件 /CH15/ 引 时 动画 fla 


个 空 


文档 ， 执 行 “ 文 件 ”| “ 导 | 


| Es 


层 和 遮 淖 层 动画 的 制作 。 


入 ”| “导入 到 库 ” 命 令 ， 弹 出 “导入 到 
库 ” 对 话 框 ， 如 图 15-24 所 示 。 
sse je 


pn 
Dp Eo 


活 jr 凋 最 二 所 。 | 引导 动画 jpg 。 | 。 地 军功 卫 jpg。 还 村 中 画 jpa 


传 克昌 jpg 


文件 (NJ: "引导 jpg' "hd.giP 所 有 可 打开 的 格式 favev'ait 


图 15-24 “导入 到 库 ” 对 话 框 


| 加 在 对 话 框 中 选择 要 导入 的 图 像 “ 引 导 动 


画 .jpg” 和 “hd.png”， 将 图 像 导 入 到 
“ 库 ” 面 板 中 ， 如 图 15-25 所 示 。 
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图 15-25 “ 库 ” 面 板 


国 将 “ 库 ” 面板 中 的 图 像 “ 引 导 动画 jpg” 拖 | 
到 舞台 中 ， 调 整 其 位 置 ， 如 图 15-26 所 示 。 


: 图 15-29 将 图 像 转换 为 图 形 元 件 

: 选中 图 层 1 的 第 40 帧 ， 按 F5 键 插入 帧 ， 选 中 
: 图 层 2 的 第 40 帧 ， 按 F6 键 插入 关键 帧 ， 如 图 
15-30 所 示 。 


图 15-26 抑 入 图 像 
园 单 击 “ 时 间 轴 ”面板 左下 角 的 “新 建 图 层 ” 
按钮 ， 新 建 一 个 “图 层 2”， 将 “ 库 ” 面板 | 
中 的 图 像 “hd.png” 拖 到 舞台 中 的 相应 位 ; 
置 ， 如 图 15-27 所 示 。 : 


: 图 15-30 插入 帧 和 关键 由 

| 固 在 图 层 2 上 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 

| ”选择 “添加 传统 运动 引导 层 ” 命 令 ， 如 图 
15-31 所 示 。 


志 


图 15-27 拖 入 图 像 
园 选中 图 像 ， 执 行 “ 修 改 ”|“ 转 换 为 元 件 ” 


命令 ， 弹 出 “转换 为 元 件 ”对 话 框 ， 在 对 | 
话 框 的 “名 称 ”文本 框 中 输入 名 称 ，“ 类 | ee 
型 ”选择 “图 形 ”， 如 图 15-28 所 示 。 | 图 15-31 选择 “添加 传统 运动 引导 层 ” 选 项 


园 单 击 “确定 ”按钮 ， 将 图 像 转换 为 图 形 元 ; 园 创建 运动 引导 层 ， 选 中 运动 引导 层 的 第 1 
件 ， 如 图 15-29 所 示 。 | 帧 ， 选 择 工具 箱 中 的 “铅笔 ”工具 ， 在 运动 
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引导 层 中 绘制 一 条 路 径 ， 如 图 15-32 所 示 。 
图 


四 选中 


层 2 的 第 1 帧 ， 将 图 形 元 件 拖 动 到 路 径 的 起 始点 ， 如 图 15-33 所 示 。 


图 15-32 绘制 路 径 图 15-33 ”移动 元 件 位 置 
园 选中 图 层 2 的 第 40 帧 ， 将 图 形 元 件 拖 动 到 路 径 的 终点 ， 如 图 15-34 所 示 。 
固 将 光标 放置 在 图 层 2 中 第 1 帧 至 第 40 帧 之 间 的 任意 位 置 ， 单 击 鼠标 右键 ， 在 弹出 的 菜单 中 选择 
“创建 传统 补 间 ” 命 令 ， 创 建 补 间 动画 ， 如 图 15-35 所 示 。 


图 15-34 调整 元 件 的 大 图 15-35 创建 传统 补 间 动 画 


且 15.3.2 ”课堂 练 一 练 一 一 创建 遮 罩 动画 
遮 罩 动画 也 是 Flash 中 常用 的 一 种 技巧 。 

遮 罩 动 画 就 好 比 在 一 个 板 上 打 了 各 种 形状 的 

孔 ， 透 过 这 些 孔 ， 可 以 看 到 下 面 的 图 层 。 


式 奔 


项 目 可 以 是 填充 的 形状 、 文 字 对 象 、 图 

元 件 的 实例 或 影片 剪辑 。 
下 面 利 用 遮 罩 层 制作 动画 ， 效 果 如 
15-36 所 示 ， 具 体操 作 步 骤 如 下 。 

原始 文件 : 原始 文件 /CH15/ 遮 罩 动 画 .jpg 

最 终 文件 : 最 终 文件 /CH15/ 遮 单 动画 .fa 
国 新 建 一 个 空白 文档 ， 执 行 “ 文 件 ”|“ 导 

入 ”|“ 导 入 到 和 舞台” 命令， 导入 图 像 “ 庶 

罩 动 画 .jpg”， 如 图 15-37 所 示 。 
园 单 击 “时 间 轴 ”面板 左下 角 的 “新 建 图 层 ” 本 和 
按钮 ， 新 建 一 个 图 层 2， 如 图 15-38 所 示 。 图 15-36 ”这 章 动画 


网 
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| 


图 15-37 导入 图 像 图 15-38 新建 图 层 
园 选择 工具 箱 中 的 “椭圆 ”工具 ， 在 图 像 上 绘制 椭圆 ， 效 果 如 图 15-39 所 示 。 
园 在 图 层 2 上 单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 “ 遮 罩 层 ” 命 令 ， 如 图 15-40 所 示 。 


国美 介 国 形 图 15-40 选择 “这 平 层 ”命令 
园 选择 选项 ， 遮 罩 效 果 如 图 15-41 所 示 。 
国 保存 文档 ， 按 Ctrl 十 Enter 快 捷 键 测试 影片 ， 效 果 如 图 15-36 所 示 。 


图 15-41 让 曾 效 果 
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| es 4 制作 多 媒体 Flash 动 画 5 


Flash 是 多 媒体 动画 制作 软件 ， 声 音 是 多 媒体 中 不 可 缺少 的 重 
要 部 分 ， 因 此 要 判断 一 款 动画 制作 软件 是 否 优秀 ， 其 对 声音 的 支持 程度 是 一 项 相当 重要 的 指标 。 
轩 15.4.1 在 Flash CC 中 导入 声音 
在 Flash 中 可 以 导入 WAV、MP3 等 多 种 格式 的 声音 文件 。 当 声音 导入 到 文档 后 ， 将 与 位 图 、 
元 件 等 一 起 保存 在 “ 库 ” 面 板 中 。 导 入 音频 文件 的 具体 操作 步骤 如 下 。 


国 打开 文档 ， 执 行 “ 文 件 ”|“ 导 入 ”|“ 导 入 到 库 ” 命 令 ， 弹 出 “导入 到 库 ” 对 话 框 ， 如 图 15-42 
所 示 。 


园 在 对 话 框 中 选择 导入 的 音频 文件 ， 单 击 “ 打 开 ” 按 钮 ， 即 可 将 文件 导入 到 “ 库 ” 面 板 中 ， 如 图 
15-43 所 示 。 


yinyue mp3 了 同形 其 jpg 


# 
引导 动画 jpg 渤 雷 动画 jpg 


添加 适 景 审 乐 . 
jpg 


cd 
- 传 议 补 辣 jpg 
ea 文 悄 (E;) ", 

名 乐 Fi 5 bi 
文件 各 (N): yinyue mp3 | 所 有 可 打开 的 格式 (,waw*.aif; ~ 


mm 
图 15-42 “导入 到 库 ” 对 话 框 图 15-43 导入 声音 文件 


咀 15.4.2 使 用 声音 

将 声音 导入 到 库 中 ， 然 后 就 可 以 将 声音 文件 添加 到 动画 中 ， 添 加 声音 的 具体 操作 步骤 如 下 。 
团 打开 文档 “导入 声音 fla”， 如 图 15-44 所 示 。 
园 打开 “ 库 ” 面 板 ， 选择 图 层 2， 将 制作 声音 文件 拖 入 到 舞台 如 图 15-45 所 示 。 


rt 


4 典雅 田园 饮 /fwdl © 


图 15-44 ”打开 文档 图 15-45 ” 拖 入 声音 
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作 15.4.3 ”编辑 声音 


同一 个 声音 可 以 做 出 多 种 效果 ， 可 以 在 ， 
“效果 ”下 拉 列 表 中 进行 选择 以 让 声音 发 生 ， 
的 ; 
变化 。 在 “属性 ”面板 中 的 “效果 ”下 拉 列 ， 
表 中 提供 了 多 种 播放 声音 的 效果 选项 ， 如 图 | 


变化 ， 还 可 以 让 左右 声 道 产 生出 各 种 不 同 


15-46 所 示 。 


图 15-46 声音 效果 选项 
“效果 ”选项 用 来 设置 声音 
下 拉 列 表 中 有 以 下 几 个 选项 。 
“无 ”: 不 设置 声 道 效 果 。 
“ 左 声 道 ”: 控制 声音 在 左 声 道 播放 。 
“ 右 声 道 ”: 控制 声音 在 右 声 道 播放 。 


对 对 对 对 


“从 左 到 右 淡出 ”: 
音 ， 同 时 提高 右 声 道 的 声音 ， 
从 左 声 道 过 渡 到 右 声 道 播放 。 


太 “从 右 到 左 淡出 ”: 控制 声音 从 右 声 道 ; 
过 渡 到 左 声 道 播放 。 | 
太 “ 淡 入 ”: 在 声音 的 持续 时 间 内 逐渐 增 | 
强 其 幅度 。 : 
太 “淡出”: 在 声音 的 持续 时 间 内 逐渐 减 ; 
小 其 幅度 。 | 
六 “ 自 定义 ”: 允许 创建 自己 的 声音 


果 ， 可 以 从 “编辑 封套 ”对 话 框 中 进行 | 


上 15.4.4 ”同步 声音 
同步 是 指 影片 和 声音 文件 的 配合 方式 。 
可 以 决定 声音 与 影片 是 同步 还 是 自行 播放 。 


在 “同步 ”下 拉 列 表 中 提供 了 4 种 方式 ， 如 图 | 


15-48 所 示 。 


图 15-48 同步 方式 


9 音效 ， 其 | 


降低 左 声 道 的 声 ; 
控制 声音 | 
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编辑 ， 如 图 15-47 所 示 。 


图 15-47 
| ”对 话 框 中 分 为 上 下 两 个 编辑 区 ， 上 方 代 
| 表 左 声 道 波形 编辑 区 ， 下 方 代表 右 声 道 编辑 
| 区 ， 在 每 一 个 编辑 区 的 上 方 都 有 一 条 左 便 带 
; 有 小 方块 的 控制 线 ， 可 以 通过 控制 线 调整 声 


“编辑 封套 ”对 话 框 


音 的 大 小 、 淡 出 和 淡 入 等 。 
在 “编辑 封套 ”对 话 框 中 可 以 设置 以 下 

| 参数 。 

太 “停止 声音 ”按钮 回 : 停止 当前 播放 的 
声音 。 

太 “播放 声音 ”按钮 国 ， 对 “编辑 封套 ”对 


话 框 中 设置 的 声音 文件 进行 播放 。 


太 “放大 ”按钮 图: 对 声 道 编辑 区 中 的 波 
| 形 进行 放大 显示 。 
| 太 “缩小 ”按钮 辆 ， 对 声 道 编辑 区 中 的 波形 

进行 缩小 显示 。 
| 大 “事件 ”: 必须 等 声音 全 部 下 载 完 毕 后 
| 才能 播放 动画 。 

太 “开始 ”: 如 果 选 择 的 声音 实例 已 在 时 
|; 间 轴 上 的 其 他 地 方 播放 过 了 ，Flash 将 不 
| 会 再 播放 这 个 实例 。 
| 胡 “停止 ”: 可 以 使 正在 播放 的 声音 文件 
| 停止 。 
| 六 “数据 流 ”: 将 使 动画 与 声音 同步 ， 以 便 
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在 Web 站 点 上 播放 。Flash 强 制 动 画 和 音频 | 屠 


流 同步 ， 将 声音 完全 附加 到 动画 上 。 


15-49 所 示 。 


图 15-49 设置 属性 | 
在 其 文本 框 中 输入 播放 的 次 ; 
数 ， 默 认 的 是 播放 1 次 。 


大 “重复 ”: 


太 “循环 ”: 声音 可 以 一 直 不 停 地 循环 播放 。 


肯 15.4.5 输出 声音 设置 

打开 “ 库 ” 面 板 ， 在 面板 中 选择 已 经 导 
入 的 声 
单 中 选择 “属性 ”命令 ， 弹出 “声音 属 性 ” 
对 话 框 ， 如 图 15-50 所 示 。 
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在 “声音 ”属性 中 的 “声音 循环 ”下 | 
拉 列 表 中 可 以 控制 声音 的 重复 播放 。 在 “ 声 | 
音 循环 ”下 拉 列表 中 有 以 下 两 个 选项 ， 如 图 | 


音 文件 ， 单 击 鼠 标 右键 ， 在 弹出 的 菜 | 


为 动画 添加 声 


图 15-50 “声音 属性 ”对 话 框 

在 “声音 属性 ”对 话 框 中 可 以 设置 以 下 
| 参数 。 
| 妇 “更 新 ”: 单 击 此 按钮 ， 可 以 更 新 声音 
| 大 “导入 ”: 单 击 此 按钮 ， 可 以 重新 导入 
| ”一 个 声音 文件 。 
| 太 “测试 ”: 单 击 此 按钮 ， 可 以 测试 声音 
效果。 
| 妇 “停止 ”: 单 击 此 按钮 ， 可 以 停止 声音 


测试 。 


实战 应 用 一 一 为 首页 添加 背景 音乐 


音 可 以 起 到 烘托 动画 效果 的 作用 ， 使 动画 更 加 


生动 ， 更 具有 表现 力 。 利 用 Flash 提 供 的 一 些 控制 音频 的 方法 ， 可 以 使 声音 独立 于 时 间 轴 循环 播 


放 ， 也 可 以 专门 为 动画 配 上 一 段 音 

果 。 为 首页 添 力 
原始 文件 : 原始 文件 /CH15/ 添 加 背景 音乐 .jpg 
最 终 文件 : 最 终 文 件 /CH15/ 背 景 音乐 .fla 


乐 ， 或 为 按钮 添加 某 种 声音 ， 
0 背景 音乐 效果 如 图 15-51 所 示 ， 具 体操 作 步 骤 如 下 。 


还 可 以 设置 声音 的 渐 入 渐 出 效 


国 执行 “文件 ” |“ 新建” 命令 ， 新 建 一 个 空白 文档 ， 如 图 15-52 所 示 。 


FORTUNE 思 
COOKIN 


图 15-51 背景 音乐 效果 


加 执行 “文件 ” | “导入 ” | “导入 到 舞台 ”命令 ， 
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图 15-52 新建 文档 
导入 图 像 “ 添 加 背景 音乐 jpg”， 如 图 15-53 所 示 。 
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“导入 ”|“ 导 入 到 库 ” 命 令 ， 弹 出 “导入 到 库 ” 对 话 框 ， 如 图 15-54 所 示 。 


园 执行 “文件 ”| 


FORTUNE ”六 
COOKIN 


og [EY] 

ya el 本 可 
ba 

机 ES 术 jpg 全 jpe jp 添 20 茜 受 言 禾 


jm 


oa | 


HO) [3 


图 15-53 导入 图 像 图 15-54 “导入 到 库 ” 对 话 框 
园 在 对 话 框 中 选择 一 个 音乐 文件 ， 单 击 “ 打 开 ” 按 钮 ， 将 其 导入 到 “ 库 ” 面 板 中 ， 如 图 15-55 所 示 。 
国 单 击 时 间 轴 面板 底部 的 “新 建 图 层 “按钮 国 ， 新 建 一 个 图 层 2， 如 图 15-56 所 示 。 


FORTUNE 
Leield EW 


Tr 
moO 一 
图 15-55 “ 库 ” 面板 图 15-56 新建 图 层 2 
国 选中 新 建 的 图 层 2， 在 “ 库 “ 面 板 中 将 声音 文件 拖 入 到 文档 中 ， 如 图 15-57 所 示 。 
选中 插入 声音 文件 的 帧 ， 在 “属性 ”面板 中 “同步 ”右边 的 下 拉 列 表 框 中 设置 为 “循环 ” 选 
项 ， 如 图 15-58 所 示 。 


FORTUNE a 
COOKIN 马 


图 15-57 拖 入 声音 文件 图 15-58 设置 属性 
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园 保存 文档 ， 按 Ctrl+Enter 快 捷 键 测 试 影片 ， 效 果 如 图 15-51 所 示 。 


一 、 填 空 题 
1. 在 Flash 中 ， 时 间 轴 位 于 工作 区 的 右 下 方 ， 是 进行 Flash 动 画 创建 的 核心 部 分 。 时 间 是 由 
和 组 成 ， 影 片 的 进度 通过 帧 来 控制 。 
2. 形状 补 间 动 画 适用 于 图 形 对 象 。 在 两 个 关键 帧 之 间 可 以 制作 出 图 形变 形 效果 ， 让 一 种 形 
状 可 以 随时 间 变 化 成 另 一 个 形状 ; 还 可 以 使 形状 的 和 颜色 进行 渐变 。 
二 、 操 作 题 


制作 简单 的 逐 帧 动画 ， 效 果 如 图 15-59 所 示 。 
最 终 文 件 : 最 终 文件 /CH15/ 习 题 fla 


图 15-59 逐 帧 动画 


] 


本 章 通过 详细 的 例子 介绍 了 Flash 中 几 种 简单 动画 的 创建 方 
法 。 内 容 包 括 逐 帧 动画 和 补 间 动画 ， 补 间 动 画 包 含 了 运动 渐变 动画 和 形状 渐变 动画 两 大 类 动画 
效果 ， 也 包含 了 引导 动画 和 遮 党 动画 这 两 种 特殊 的 动画 效果 。 
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全 Photoshop CC 和信 门 基础 


本 章 导读 
Photoshop 是 Adobe 公 司 旗下 最 为 出 名 的 图 像 处 


理 软件 之 一 ， 集 图 像 扫描 、 编 辑 修改 、 图 像 制 作 、 广 
告 创 意 ， 图 像 输入 与 输出 于 一 体 的 图 形 图 像 处 理 软 
件 ， 深 受 广 大 平面 设计 人 员 和 电脑 美术 爱好 者 的 喜 
爱 。Adobe Photoshop CC 软件 通过 更 直观 的 用 户 体 
验 、 更 大 的 编辑 自由 度 及 大 幅 提高 的 工作 效率 ， 使 您 
能 更 轻松 地 使 用 其 无 与 伦比 的 强大 功能 。 


技术 要 点 

友 ”网 页 图 像 基础 知识 

友 ”Photoshop CC 工作 界面 
友 ”调整 网 页 图 像 文件 
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16 | 网 页 图 像 基础 知识 


Photoshop 是 一 款 图 像 处 理 软件 ， 它 能 做 些 什么 呢 ? 可 以 说 ， 
在 图 像 处 理 领域 中 ， 它 可 以 完成 很 多 方面 的 工作 ， 关 键 问 题 是 用 户 怎样 使 用 它 。 


中 16.1.1 矢量 图 和 位 图 

很 多 Photoshop 初 学 者 搞 不 清楚 位 图 与 矢量 图 之 间 的 区 别 。 其 实 ， 位 图 是 由 不 同 亮度 和 颜色 
的 像素 所 组 成 ， 适 合 表现 大 量 的 图 像 细 节 ， 可 以 很 好 地 反映 明暗 的 变化 、 复 杂 的 场景 和 颜色 ， 
它 的 特点 是 能 表现 逼真 的 图 像 效 果 ， 但 是 文件 比较 大 ， 并 且 缩 放 时 清晰 度 会 降低 并 出 现 锯齿 。 
位 图 有 种 类 繁多 的 文件 格式 ， 常 见 的 有 JPEG、PCX、BMP、PSD、PIC、GIF 和 TIFF 等 。 位 图 
图 像 效 果 好 ， 放 大 以 后 会 失真 。 
而 矢量 图 则 使 用 直线 和 曲线 来 描述 图 形 ， 这 些 图 形 的 元 素 是 一 些 点 、 线 、 和 矩形 、 多 边 形 、 
圆 和 弧 线 等 ， 它 们 都 是 通过 数学 公式 计算 获得 的 ， 所 以 矢量 图 形 文件 一 般 较 小 。 矢 量 图 形 的 优 
点 是 无 论 放 大 、 缩 小 或 旋转 等 都 不 会 失真 ;缺点 是 难以 表现 色彩 层次 丰富 的 逼真 图 像 效 果 ， 而 
且 显 示 矢 量 图 也 需要 花费 一 些 时 间 。 矢 量 图 形 主要 用 于 插图 、 文 字 和 可 以 自由 缩放 的 徽标 等 图 
形 。 一 般 常 见 的 文件 格式 有 AI 等 。 矢 量 图 图 像 效 果 差 ， 放 大 以 后 不 会 失真 。 

很 多 Photoshop 初 学 者 搞 不 清楚 位 图 与 矢量 图 之 间 的 区 别 ， 经 常会 问 一 些 搞 笑 的 问题 。 比 
如 : Photoshop 可 以 处 理 图 像 ， 不 能 绘制 矢量 图 形 ;矢量 图 形 绘图 软件 ， 不 能 修改 位 图 图 像 等 。 
下 面 结合 实例 为 大 家 详细 讲述 两 种 图 像 的 区 别 。 


国 16.1.2 颜色 模式 

颜色 模式 是 图 像 设计 的 最 基本 知识 ， 它 决定 了 如 何 描述 和 重 现 图 像 的 色彩 。 在 Photoshop 
中 ， 常 用 的 颜色 模式 有 RGB、CMYK、Lab、 位 图 模式 、 灰 度 模式 、 索 引 模式 、 双 色调 模式 、 
多 通道 模式 等 ， 在 图 像 模 式 中 ， 可 以 转换 其 颜色 模式 。 
1，RGB 模 式 

RGB 色彩 就 是 常 说 的 三 原色 ，R 代 表 Red (红色 ) ，G 代 表 Green (绿色 ) ，B 代 表 Blue ( 蓝 
色 ) 。 之 所 以 称 为 三 原色 ， 是 因为 在 自然 界 中 肉眼 所 能 看 到 的 任何 色彩 都 可 以 由 这 3 种 色彩 混 
合 到 加 而 成 ， 因 此 也 称 为 加 色 模 式 。 它 是 Photoshop 最 常用 的 一 种 颜色 模式 ， 以 红色 、 绿 色 、 蓝 
色 3 种 原色 作为 图 像 色 彩 的 显示 模式 ， 彩 色 图 像 中 每 个 像素 的 RGB 分 量 分 配 一 个 从 0〈 黑 色 ) 到 
255 (白色 ) 范围 的 强度 值 。 
2，CMYK 颜 色 模式 

CMYK 颜 色 模 式 是 一 种 印刷 模式 ， 由 青色 、 洋 红色 、 黄 色 、 黑 色 4 种 原色 作为 图 像 的 色彩 
显示 模式 ， 在 Photoshop 的 CMYK 模 式 中 ， 每 个 像素 的 每 种 印刷 油墨 会 被 会 配 一 个 百分比 值 。 
3，LAB 颜 色 模 式 

LAB 颜 色 模式 是 Photoshop 在 不 同 颜色 模式 之 间 转 换 时 使 用 的 内 部 颜色 模式 ， 能 毫 无 偏差 
地 在 不 同系 统 和 平台 之 间 进 行 转 换 。 世 代表 光亮 度 分 量 ， 范 围 0-100，A 表 示 从 绿 到 红 的 光谱 变 
化 ，B 表 示 从 蓝 到 黄 的 光谱 变化 ， 两 者 范围 都 是 +120~120。 
4. 索引 模式 

为 了 减 小 图 像 文 件 所 占 的 存储 空间 ， 人 们 设计 了 一 种 “索引 颜色 ”模式 。 由 于 这 种 模式 可 
以 极 大 地 减 小 图 像 文 件 的 存储 空间 ， 所 以 多 用 于 网 页 图 像 与 多 媒体 图 像 。 
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5. 厅 度 模式 

灰 度 图 像 的 每 个 像素 有 一 个 0 (黑色 〉 到 255 (和 白色) 之 间 的 亮度 值 ， 也 可 以 用 黑色 油墨 覆 
盖 的 百分比 来 表示 。 当 灰 度 模式 向 RGB 转换 时 ， 像 素 的 颜色 值 取决 于 其 原来 的 灰色 值 。 
6. 双色 调 模式 

彩色 印刷 品 通常 情况 下 都 是 以 CMYK4 种 油墨 来 印刷 的 ， 但 也 有 些 印 刷 物 ， 例 如 名 片 ， 往 
往 只 需要 用 两 种 油墨 颜色 就 可 以 表现 出 图 像 的 层次 感 和 质感 。 因 此 ， 如 果 并 不 需要 全 彩色 的 印 
刷 质量 ， 可 以 考虑 利用 双色 印刷 来 降低 成 本 。 
7. 位 图 模式 

使 用 两 种 颜色 值 〈 黑 白 ) 来 表示 图 像 中 的 像素 ， 因 此 也 叫 黑白 图 像 。 当 图 像 要 转换 成 位 
模式 时 ， 必 须 先 将 图 像 转换 成 灰 度 模 式 后 才能 转换 成 位 图 模式 。 
8. 多 通道 模式 

将 图 像 转换 为 “多 通道 ”模式 后 ， 系 统 将 根据 源 图 像 产生 相同 数目 的 新 通道 ， 但 该 模式 
下 的 每 个 通道 都 为 256 级 灰 度 通道 〈 其 组 合 仍 为 彩色 ) 。 这 种 显示 模式 通常 被 用 于 处 理 特殊 打 
印 ， 例 如 ， 将 某 一 灰 度 图 像 以 特别 颜色 打印 。 


| 6. Photoshop CC 工作 界面 o 


Adobe Photoshop CC 窗口 环境 是 编辑 、 处 理 图 形 图 像 的 操作 
平台 ， 它 主要 由 菜单 栏 、 工 具 箱 、 工 具 选 项 栏 、 面 板 、 文 档 窗口 等 组 成 ， 工 作 界 面 如 图 16-1 
所 示 。 


加 


7 - 
上 

到 

外 

乡 

! 

vy 

[ 


图 16-1 Adobe Photoshop CC 工作 界面 


上 16.2.1 菜单 栏 
Photoshop CC 菜单 栏 包括 “文件 ”、“ 编 辑 ”、“ 图 像 ”、“ 图 层 ”、“ 文 字 ”、“ 先 
择 ”、“ 滤 镜 ”、“ 视 图 ”、“ 窗 口 ” 和 “帮助 ”10 个 菜单 ， 如 图 16-2 所 示 。 


加 4) 中。 文字 选择 全 污 访 由 视图 人。 窗口 (W) 帮助 (H) 


图 16-2 莱 单 栏 
太 “文件 ”菜单 :对 所 修改 的 图 像 进 行 打开 、 关 闭 、 存 储 、 输 出 、 打 印 等 操作 。 
太 “编辑 ”菜单 : 编辑 图 像 过 程 中 所 用 到 的 各 种 操作 ， 如 拷贝 、 粘 贴 等 一 些 基 本 操作 。 
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“图 像 ”菜单 : 用 来 修改 图 像 的 各 种 属性 ， 包 括 图 像 和 画布 的 大 小 、 图 像 颜色 的 调整 等 。 
“图 层 ” 莱 单 : 图 层 基本 操作 命令 。 

“文字 ”: 用 于 设置 文本 的 相关 属性 。 

“选择 ”菜单 : 可 以 对 选区 中 的 图 像 添 加 各 种 效果 或 进行 各 种 变化 而 不 改变 选区 外 的 图 
像 ， 还 提供 了 各 种 控制 和 变换 选区 的 命令 。 

太 “ 滤 镜 ”菜单 : 用 来 添加 各 种 特殊 效果 。 

太 “视图 ”菜单 :用 于 改变 文档 的 视图 ， 如 放大 、 缩 小 、 显 示 标 尺 等 。 

克 “窗口 ”菜单 :用 于 改变 活动 文档 ， 以 及 打开 和 关闭 Photoshop CS6 的 各 个 浮动 面板 。 

六 上 

I 


对 对 对 对 


“帮助 ”菜单 : 用 于 查找 帮助 信息 。 


16.2.2 工具 箱 及 工具 选项 栏 - 


Photoshop 的 工具 箱包 含 
了 多 种 工具 ， 要 使 用 这 些 工 
具 ， 只 要 单 击 工具 箱 中 的 工 
具 按 钮 即 可 ， 如 图 16-3 所 示 。 

使 用 Photoshop CC 绘制 
图 像 或 处 理 图 像 时 ， 需 要 在 
工具 箱 中 选择 工具 ， 同 时 需 
要 在 工具 选项 栏 中 进行 相应 
的 设置 ， 如 图 16-4 所 示 。 


图 16-3 工具 箱 图 16-4 工具 选项 栏 


16.2.3 文档 窗口 及 状态 栏 


图 像 文件 窗口 就 是 显示 
图 像 的 区 域 ， 也 是 编辑 和 处 
理 图 像 的 区 域 。 在 图 像 窗口 
中 可 以 实现 Photoshop 中 所 有 
的 功能 ， 也 以 可 以 对 图 像 窗 
口 进 行 多 种 操作 。 如 改变 窗 
口 大 小 和 位 置 ， 对 窗口 进行 
缩放 等 。 文 档 窗口 如 图 16-5 
所 示 。 

状态 栏 位 于 图 像 文件 窗 
口 的 最 底部 ， 主 要 用 于 显示 
图 像 处 理 的 各 种 信息 ， 如 图 ge 
16-6 所 示 。 图 16-5 文档 窗口 


16-6 ”状态 栏 
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上 16.2.4 面板 

在 默认 情况 下 ， 面 板 位 于 文档 窗口 的 
右 侧 ， 其 主要 功能 是 查看 和 修改 图 像 。 一 些 
面板 中 的 菜单 提供 其 他 命令 和 选项 。 可 以 使 
用 多 种 不 同方 式 组 织 工作 区 中 的 面板 ， 可 以 
将 面板 存储 在 “面板 箱 ” 中 ， 以 使 它们 不 干 
扰 工作 且 易 于 访问 ， 或 者 可 以 让 常用 面板 在 
工作 区 中 保持 打开 。 另 一 个 选项 是 将 面板 编 
组 ， 或 将 一 个 面板 停放 在 另 一 个 面板 的 底 
部 ， 如 图 16-7 所 示 。 


CE 
a 


图 16-7 面板 组 


| 6 3 调整 网 页 图 像 文件 


图 片 的 大 小 很 重要 ， 这 关系 到 搜索 引擎 体验 及 用 户 体验 ， 图 
片 过 大 ， 很 容易 造成 页 面 布局 的 混乱 ， 导 致 整体 结构 平衡 性 失调 ， 用 户 浏览 时 ， 美 观感 觉 大 幅 
度 下 降 ， 影 响 到 用 户 浏览 行为 ， 同 时 会 影响 到 网 页 加 载 速度 ， 若 自身 网 站 带宽 和 流量 有 限 ， 更 
深 受 其 影响 ， 直 接 造 成 该 页 面 跳出 率 过 高 ， 进 一 步 造 成 到 网 页 排名 效果 缓慢 。 我 们 需要 在 控制 
图 片 大 小 的 同时 ， 掌 握 图 片 失真 情况 ， 充 分 考虑 清晰 度 。 可 以 利用 Photoshop 工 具 来 处 理 ， 将 其 
适当 控制 大 小 ， 提 高 网 页 图 片 加 载 速度 。 


用 16.3.1 课堂 练 一 练 一 一 调整 图 像 大 小 


考虑 网 络 速度 的 限制 ， 网 页 图 片 文件 一 般 不 能 太 大 ， 太 大 的 图 片 影响 浏览 器 打开 网 页 的 速 
。 下 面 讲述 调整 图 像 的 大 小 ， 具 体操 作 步 骤 如 下 。 

加 新 建 一 个 空白 文档 ， 执 行 “文件 ”| “打开” 命令 ， 打 开 图 像 文件 ， 如 图 16-8 所 示 。 

园 执行 “图 像 ”| “图 像 大 小 ”命令 ， 弹 出 “图 像 大 小 ”对 话 框 ， 修 改 “ 宽 度 ” 和 “高 度 ”， 如 图 
16-9 所 示 。 


图 绚 大 小 : 1.23M [3 
尺寸 器 790 者 素 X 542 像 素 
调 吉 为 原 六 大 小 
二 现 度 (0); 区 可 保 素 
一 高 度 [c) 542 人 这 
革 (R); 7 从 /总 征 
回 重新 和 (5): 自动 


图 16-8 ”打开 图 像 文件 图 16-9 “图 像 大 小 ”对 话 框 
园 单 击 “ 确 定 ” 按 钮 ， 即 可 设置 图 像 大 小 ， 如 图 16-10 所 示 。 
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E 
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图 16-10 调整 图 像 大 小 


旧 16.3.2 ”课堂 练 一 练 一 一 使 用 


通过 “ 色 阶 ”命令 可 以 调整 整个 图 像 或 


“ 色 阶 ”命令 美化 图 像 


某 个 选区 内 图 像 的 色 阶 。 下 面 讲 述 利用 色 阶 | 


美化 图 像 效 果 ， 具 体操 作 步 骤 如 下 。 
团 启动 Photoshop CC， 执行“ 文件 ”| “打开” 


命令 ， 弹 出 “打开 ”对 话 框 ， 在 该 对 话 框 中 | 
像 文件 “ 色 阶 jpg”， 单 击 “ 确 定 ” | 


选择 图 


按钮 ， 打 di 如 图 16-11 所 示 。 


FE SewshNNa 
NN NA 


E 
而 


图 16-11 打开 图 像 文件 


@ 和 
出 “ 色 阶 


图 像 ”| “调整 ” 1“ 色 阶 ” 命令 ， 


整 输入 色 阶 ， 如 图 16-12 所 示 。 


记 阶 


上 


和 RE， BE 、 


i(C): RGB 


APAD): 
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图 16-12 “ 色 阶 ”对 话 框 


| 果 ， 具 体操 作 步骤 如 下 。 
| 启动 Photoshop CC， 执行“ 文件 ”|“ 打 


阶 ”对 话 框 ， 在 弹出 的 对 话 框 中 调 | 


| 国 单 击 “ 确 定 ”按钮 ， 即 可 调整 色 阶 效果 ， 如 


图 16-13 所 示 。 


图 16-13 调整 色 阶 效果 


:M16.3.3 课堂 练 一 练 一 一 使 用 


“曲线 ”命令 美化 图 像 
本 节 讲述 利用 “曲线 ”命令 美化 图 像 效 


7 


”命令 ， 弹 出 “打开 ”对 话 框 ， 在 该 对 
话 框 中 选择 图 像 文件 “曲线 .jpg”， 单 击 
“确定 ”按钮 ， 打 开 图 像 文件 ， 如 图 16-14 
所 示 。 


图 16-14 打开 图 像 文件 


| 园 执行 “图 像 ” 1“ 调整" | “曲线 ”命令 ， 


出 “曲线 ”对 话 框 ， 在 弹出 的 对 话 框 中 输 
入 和 调整 想 要 的 参数 ， 如 图 16-15 所 示 。 


| 固 单 击 “ 确 定 ”按钮 ， 即 可 调整 曲线 效果 ， 如 


图 16-16 所 示 。 
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预 设 (RN): 扎 定 
通道 (C): RGB 


加 2 


虹 # 吕 直选 硕 


图 16-15 “曲线 ”对 话 框 图 16-16 调整 曲线 效果 


侦 16.3.4 课堂 练 一 练 一 一 调整 图 像 亮 度 与 对 比 度 


本 节 讲 述 利用 亮度 和 对 比 度 美化 图 像 效 | 16-18 所 示 。 

果 ， 具 体操 作 步 骤 如 下 。 | 1 

启动 Photoshop CC， 执 行 “文件 ”|“ 打 开 ” ; 
命令 ， 弹 出 “打开 ”对 话 框 ， 在 该 对 话 框 ; 
中 选择 图 像 文 件 “ 亮 度 和 对 比 度 .jpg” | 对 比 度 : 


单 击 “ 确 定 ” 按 钮 ， 打 开 图 像 文件 ， 如 图 BE 
16-17 所 示 使 用 旧版 (D 回 3(p) 


图 16-18 “亮度 /对 比 度 ” 对 话 框 


加 单 击 “ 确 定 ”按钮 ， 即 可 调整 亮度 /对 比 度 
框 效果 ， 如 图 16-19 所 示 。 


EECRTRSRE 
月 国 


= 
司 


本 


图 16-17 打开 图 像 文件 
园 执行 “图 像 ”|“ 调 整 ”|“ 亮 度 /对 比 度 ” | 
命令 ， 弹 出 “亮度 /对 比 度 ” 对 话 框 ， 在 弹 | 
出 的 对 话 框 中 调整 输入 想 要 的 参数 ， 如 图 | 图 16-19 调整 “亮度 (对比度 ”效果 


中 16.3.5 课堂 练 一 练 一 一 使 用 色彩 平衡 
本 节 讲述 利用 色彩 平衡 美化 图 像 效 果 ， 具 体操 作 步骤 如 下 。 

启动 Photoshop CC， 执 行 “ 文 件 ”| “打开 ”命令 ， 弹 出 “打开 ”对 话 框 ， 在 该 对 话 框 中 选择 
像 文件 “色彩 平衡 jps”， 单 击 “ 确 定 ”按钮 ， 打 开 图 像 文件 ， 如 图 16-20 所 示 。 

园 执行 “图 像 ”| “调整 ”| “色彩 平衡 ”命令 ， 弹 出 “色彩 平衡 ”对 话 框 ， 在 弹出 的 对 话 框 中 调整 
输入 想 要 的 参数 ， 如 图 16-21 所 示 。 


浊 
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网 


单 击 “ 确 定 ” 按 钮 ， 打 开 图 像 文件 ， 如 


16-23 所 示 。 


z 
工 
. 
2 
E 

2 
lL 


有 an 


图 16-20 打开 图 像 文件 
这 Ez 


: 图 16-23 打开 图 像 文件 
| 园 执行 “图 像 ” | “调整” |“ 色相 与 饱和 度 ” 
| 命令 ， 弹 出 “色相 与 饱和 度 ” 对 话 框 ， 在 
| | 弹出 的 对 话 框 中 调整 输入 想 要 的 参数 ， 如 
可 中 间 崩 [D) 。 加 高 X(H) : 图 16-24 所 示 。 


习 保 持 明度 (V) 


图 16-21 “色彩 平衡 ”对 话 框 : 
园 单 击 “ 确 定 ” 按 钮 ， 即 可 调整 色彩 平衡 效 | 
果 ， 如 图 16-22 所 示 。 | 


mCP) 


: 图 16-24 “色彩 平衡 ”对 话 框 
| 园 单 击 “确定 ”按钮 ， 即 可 调整 色相 与 饱和 度 
| 效果 ， 如 图 16-25 所 示 。 


-em 到 est: ~ 


图 16-22 ”调整 色彩 平衡 效果 


用 16.3.6 课堂 练 一 练 一 一 调整 图 
像 色 相 与 饱和 度 


本 节 讲 述 利用 色相 和 饱和 度 美 化 图 像 效 
果 ， 具 体操 作 步 骤 如 下 。 
国 启动 Photoshop CC， 执 行 “文件 ” |“ 打开 ” ; 

命令 ， 弹 出 “打开 ”对 话 框 ， 在 该 对 话 框 ; 
中 选择 图 像 文件 “色相 与 饱和 度 .jpg”， ; 图 16-25 色相 与 饱和 度 效 果 
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16 .4 FE 


下 面 讲述 简单 处 理 网 页 中 的 图 像 ， 如 
ha 具体 操作 步骤 如 下 。 


[出 


全 渗 工 
和 田 脆 玉 吊坠 ( 水 滴 型 


Fam 


自动 (A) 


本 预览 (P) 


图 16-28 “亮度 /对 比 度 ”对 话 框 
单 击 “ 确 定 ” 按 钮 ， 调 整 亮度 对 比 度 ， 如 


网 


MEN 0 NN 


SewhNANan 
户 国 呈 户 国 NN TF 


3 


3 


图 16-26 ”处理 图 像 效 果 
原始 文件 : 原始 文件 /CH16/tujpg 
最 终 文件 : 最终 文件 /CH16/tu.jpg : 
团 执行 “文件 ”| “打开 ”命令 ,， 弹出“ 打 | 


开 ” 对 话 框 ， 打 开 图 像 文件 “tujpg”， 如 | 图 16-29 调整 亮度 对 比 度 

图 16-27 所 示 。 加 执行 “图 像 ” | “调整 ”| “曲线 ”命令 ，3 
园 执行 “图 像 ”| “调整”" | “亮度 /对 比 度 ” 命 :| ”出 “曲线 ”对 话 框 ,设置 曲线 ， 如 图 16-30 

令 ， 弹 出 “亮度 /对 比 度 ” 对 话 框 ， 在 该 对 : ”所 示 。 

话 框 中 将 “亮度 ”设置 为 2，“ 对 比 度 ” | 全 


设置 为 -14， 如 图 16-28 所 示 。 | | san: ss 
通道 (CO): RGB 
[a 


4 


自动 (A) 
选 页 (TD 


可 和 8(P) 


MeNPAND'] 
PIPNN 


晶 
加 


Bl 


昱 示 修 草 (W) 


图 16-27 打开 图 像 文 件 图 16-30 “曲线 ”对 话 框 
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园 单 击 “ 确 定 ” 按钮， 设置 曲线 效果 ， 如 


[出 


包 末 平 再 


epiu: -2 加 | #30 
A 
| 
RE 

色 词 于 寺 
朋 路 S) 针 中 酸 所 (0) 高 光 (H) 
REY 


图 16-32 设置 色 阶 


二 
Ed 
下 
sm 
sa 
oT 
上 图 
Ea 
品 
吾 


昌 


全 狂 王 


和 田 莫 玉 串 坠 (水 渍 型 


图 16-31 设置 曲线 效果 
国 执行 “图 像 ”|“ 调 整 ”|“ 色 彩 平衡 ” 命 ; 
单 出 “ 勾 平 和” 对 话 框 ， 在 该 对 话 | 
框 中 设置 色 阶 ， 如 图 16-32 所 示 。 : 
单 击 “ 确 定 ”按钮 ， 设 置 色彩 平衡 ， 效 果 如 
图 16-33 所 示 。 : 图 16-33 设置 色彩 平衡 


-、 填 空 是 | 二、 操作 是 
1. 矢量 图 形 主 于 插图 、 文 字 和 可 以 | 处 理 图 16-34 所 示 的 图 像 。 
缩放 的 徽标 等 图 形 。 一 般 常见 的 文件 格 : 最 终 文 件 : 最 终 文件 /CH16/ 习 题 la 
式 有 AI 等 。 矢 量 图 图 像 效 果 差 ， 放 大 以 后 不 | 
人 ! 


2. 颜色 模式 是 图 像 设计 的 最 基本 知识 ， 它 


决定 了 如 何 描述 和 重 现 图 像 的 色彩 。 在 Photoshop ， 
中 ， 常 用 的 颜色 模式 有 RGB、CMYK、Lab、 : 


、 、 双色 调 模式 、 : 
多 通道 模式 等 ， 在 图 像 模式 中 ， 可 以 转换 其 颜色 
模式 。 | 图 16-34 ”处 理 图 像 


16. 


本 章 介 绍 了 Photoshop 的 基本 概念 、Photoshop CC 的 工作 界 
， 以 及 对 图 像 文 件 的 基本 调整 操作 。 颜 色 处 理 一 向 都 是 图 像 编 辑 工作 的 难点 ， 相 信 读 者 只 要 
细 地 揣摩 其 中 的 含义 ， 明 白 各 命令 的 工作 原理 、 掌 握 其 调节 方法 并 不 是 一 件 难事 。 


对 


SS 
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第 17 章 
网 页 特效 文字 的 制作 


本 章 导 读 
虽然 图 片 的 表达 效果 要 强 于 普通 的 文字 ， 但 是 
文字 也 能 够 起 到 注释 与 说 明 的 作用 。 在 图 片 脱 胱 写意 
与 含蓄 表达 后 ， 需 要 用 文字 这 种 语言 符号 加 以 强化 。 
Photoshop 处 理 过 的 文字 图 片 表现 力 非常 强 ， 应 用 也 非 
常 的 广泛 ， 下 面 跟 大 家 介绍 利用 Photoshop 制 作 光影 绚 
丽 的 文字 特效 。 


技术 要 点 

友 ”使 用 图 层 

友 “处理 文本 

友 ”使 用 滤 镜 制作 特效 图 像 
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图 层 功能 被 誉 为 photoshop 的 灵魂 ， 这 个 比喻 一 点 也 不 夸张 。 
图 层 在 我 们 使 用 Photoshop 进 行 图 像 处 理 中 ， 具 有 十 分 重要 的 地 位 ， 也 是 最 常用 到 的 功能 之 一 。 
掌握 图 层 的 概念 是 我 们 学 习 Photoshop 的 第 一 课 。 下 面 就 来 对 Photoshop 的 图 层 功能 做 一 个 详细 
的 了 解 。 
由 17.1.1 图 层 的 基本 操作 

在 Photoshop 中 ， 一 幅 图 像 通常 是 由 多 个 ; 图 像 的 分 辩 率 。 如 果 原 图 像 的 分 辩 率 低 于 目 
不 同类 型 的 图 层 通过 一 定 的 组 合 方式 自 下 而 ; 标 图 像 的 分 状 率 ， 那 么 复制 图 层 在 目标 图 像 
上 芭 放 在 一 起 组 成 的 ， 它 们 的 看 放 顺 序 及 混 ; 中 就 会 显得 比 原来 小 ， 打 印 时 也 如 此 。 如 果 


合 方式 直接 影响 着 图 像 的 显示 效果 。 | 原 图 像 的 分 辩 率 高 于 目标 图 像 的 分 辨 率 ， 那 

1 新 建 图 层 | 么 拷贝 图 层 在 目标 图 像 中 就 会 显得 比 原来 要 
图 层 的 新 建 有 几 种 情况 ，Photoshop 在 执 大， 打印 时 也 会 显得 比 原来 要 大 。 

行 某 些 操作 时 会 自动 创建 图 层 。 例 如 ， 当 在 ; 。 ”在 “图 层 ” 面 板 中 选择 要 被 复制 的 图 层 


进行 图 像 粘贴 时 ， 或 者 在 创建 文字 时 ， 系 统 : 作为 当前 工作 层 ， 然 后 执行 “图 层 ”| “复制 
会 自动 为 粘贴 的 图 像 和 文字 创建 新 图 层 ， 也 ; 图 层 ” 命 令 ， 弹 出 “复制 图 层 ” 对 话 框 ， 如 
可 以 直接 创建 新 图 层 。 图 17-3 所 示 。 

执行 “图 层 ”| “新建”| “图 层 ” 命 令 ， | PE 


复制 : 图 尼 1 


打开 “新 建 图 层 ” 对 话 框 ， 如 图 17-1 所 示 。 单 ， A WE 
击 “ 确 定 ”按钮 ， 即 可 新 建 图 层 1， 如 图 17-2 | es 
所 示 。 | 


| 图 17-3 “复制 图 层 ” 对 话 框 
ET | } 太 “ 为 ”: 为 复制 后 新 建 的 图 层 取 名 ， 系 
人 |; 统 默认 的 名 字 会 随 着 目标 文档 的 不 同 而 
| 不 同 。 

| 太 “文档 ”: 选择 复制 的 目标 文件 ， 系 统 
| 默认 的 选项 是 原 图 像 本 身 ， 选 定 它 会 将 
复制 的 图 层 又 粘贴 到 原 图 像 中 。 如 果 在 
Photoshop 中 同时 打开 了 其 他 一 些 文件 ， 
这 些 文件 的 名 字 会 在 “文档 ”下 拉 菜 单 
| 中 列 出 ， 选 择 其 中 任意 一 个 ， 就 会 将 复 

图 17-2 新 建 图 层 1 | 制 的 图 层 粘贴 到 选 定 的 文件 中 。 
| 执行 “图 层 ”| “删除 ”|“ 图 层 ” 命 令 ， 
Ye | 弹出 图 17-4 所 示 的 对 话 框 ， 提 示 将 图 层面 板 中 


图 像 中 复制 包括 背景 层 在 内 的 所 有 图 层 或 图 ， 迁 定 的 当前 工作 图 展 划 险 。 


图 17-1 “新 建 图 层 ” 对 话 框 


Adcbe Photoshop CC 


层 组 ， 也 可 以 将 它们 从 一 幅 图 像 复制 到 另 一 | @ ee 
幅 图 像 。 | er rm EBD 
在 图 像 间 拷贝 图 层 时 ， 一 定 要 记 住 复 | ee 


制图 层 在 目标 图 像 中 的 打印 尺寸 决定 于 目标 ， 图 174 “删除 图 层 ”对 话 框 
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侦 17.1.2 ”图 层 的 分 组 | 
“图 层 ” 可 以 让 用 户 更 有 效 地 组 织 和 管 
理 图 层 ， 在 “图 层 ”面板 中 可 以 打开 一 个 图 | 
层 组 以 显示 夹子 里 的 图 层 ， 也 可 以 关闭 图 层 ; 
以 免 引起 混乱 ， 从 而 使 “图 层 ” 面 板 显得 更 | 
有 条 理 ， 还 可 以 利用 图 层 组 将 蒙 版 或 其 他 效 ; 
果 一 次 性 应 用 到 一 组 图 层 中 。 : 

执行 “图 层 ”| “新建 ”|“ 从 图 层 建立 | 
组 ”命令 ， 弹 出 “从 图 层 新 建 组 ”对 话 框 ， | 
如 图 17-5 所 示 。 对 图 层 组 的 编辑 就 好 比 是 对 图 ; 
层 的 编辑 一 样 ， 因 此 “从 图 层 新 建 组 ” 对话 | 
框 与 “新 建 图 层 ” 对 话 框 显得 很 相似 ， 这 里 | 
可 以 为 新 建 的 图 层 组 取 名 、 改 变 颜色 及 不 透 | 
明度 ， 还 可 以 改变 混合 模式 。 


图 17-7 图 层 混合 模式 


Lo | S 号 |; 中 17.1.4 图 层 的 样式 


wm 有 ~ uatoy 100 | ”图 层 样式 效果 非常 丰富 ， 以 前 需要 用 很 
PT PP 了 天 | 多 步骤 制作 的 效果 在 这 里 设置 几 个 参数 就 可 

二 ee | 以 轻松 完成 ， 图 层 的 样式 包含 了 许多 可 以 自 

其 实 图 层 组 就 可 以 看 成 一 个 复合 的 ， 只 | 

趟 过 图 层 里 过 有 本 层 贡 于， 页 此 对 宣 层 刀 所 | 动 应 用 到 图 层 中 的 效果 ， 包 括 投影 、 发 光 、 
和 a | 斜面 和 浮雕 、 描 边 、 图 案 填 充 等 效果 。 

也 类 似 于 对 图 层 的 编辑 ， 可 以 像 对 图 层 ; 

ei | 当 应 用 了 一 个 图 层 效果 时 ， 一 个 小 三 角 和 


一 样 地 去 定义 、 选 择 、 复 制 、 移 动 图 层 组 。 | 

"| 一 个 f 图 标 就 会 出 现在 “图 层 ”面板 中 相应 图 
创建 图 层 组 后 ， 可 以 方便 地 将 图 层 移 入 或 黎 二 友和 的 丰产 人 二 二 这 四 半自动 
出 图 层 ， 如 图 17-6 所 示 的 图 层面 板 。 | 全 


; 并 且 当 出 现 的 是 向 下 的 小 三 角 时 ， 还 能 具体 看 
| 到 该 图 层 到 底 被 应 用 了 哪些 自动 效果 。 这 样 就 
| 更 便于 用 户 对 图 层 效 果 进 行 管理 和 修改 ， 如 图 
| 17-8 所 示 。 


图 17-6 “图 层 ” 面 板 


人 肯 17.1.3 图 层 的 混合 模式 : 
图 层 的 混合 模式 ， 该 列表 框 中 的 选项 决 ; 


定 了 当前 层 与 其 他 层 的 合成 模式 ， 如 图 17-7 所 ， 图 17-8 “从 图 层 新 建 组 ”对 话 框 
示 。 可 以 在 其 中 选择 不 同 的 合成 模式 以 做 出 } 执行 “图 层 ”| “图 层 样式 ”命令 ， 弹 出 
神奇 的 效果 。 i 图 层 样式 菜单 ， 如 图 17-9 所 示 。 
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文字 在 图 像 中 往往 起 着 画龙点睛 的 作用 ， 在 网 页 制作 中 使 
特效 文字 也 较 多 。Photoshop 提 供 了 丰富 的 文字 工具 ， 人 允许 在 图 像 背景 上 制作 多 种 复杂 的 文字 效 
果 。 利 用 文字 工具 不 仅 可 以 把 文字 添加 到 文档 中 ， 同 时 也 可 以 产生 各 种 特殊 的 文字 效果 。 


虽 17.2.1 文本 工具 

在 Photoshop 中 ， 文 字 工具 包括 “ 横 排 文字 工具 ”、“ 直 “ET 和 
排 文字 工具 ”、“ 横 排 文字 蒙 版 工具 ”和 “ 直 排 文字 蒙 版 工 。 马鞭 sei 
具 ”。 要 选取 该 工具 ， 可 以 单 击 相应 的 工具 按钮 ， 如 图 17-10 所 直 排 文字 莹 版 I 具 。 T 
示 。 可 以 对 文本 进行 更 多 的 控制 ， 如 可 以 实现 在 输入 文本 时 自 全 和 
动 换行 ， 可 以 将 文本 转换 为 路 径 等 。 

下 面 通过 实例 讲述 文字 的 输入 ， 具 体操 作 步 骤 如 下 。 
国 打开 图 像 文件 “1jpg”， 选 择 工具 箱 中 的 “ 横 排 文字 工具 ”， 如 图 17-11 所 示 。 
固 在 图 像 上 单 击 输入 文字 “花朵 ”， 如 图 17-12 所 示 。 


SewhNANt 
paNN 


"< 
| 


E 
[] 


图 17-11 打开 图 像 文件 图 17-12 输入 文字 
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人 肯 17.2.2 设置 字体 
选中 要 设置 字体 的 文本 ， 即 可 设置 文本 | 17-17 所 示 。 
属性 ， 具 体操 作 步 骤 如 下 。 E 
选中 要 设置 字体 的 文本 ， 在 “字体 ”下 拉 列 
表 中 选择 要 设置 的 字体 ， 如 图 17-13 所 示 。 | 


= 


NNN 


3 NMNN 林 到 


人 SN 
图 17-15 选择 字体 


samp 


图 17-13 选择 字体 


园 选中 要 设置 字体 大 小 的 文本 ， 在 字体 大 小 下 | 
拉 列 表 中 设置 字体 的 大 小 ， 如 图 17-14 所 示 。 


38 


图 17-14 设置 字体 大 小 
园 选择 以 后 设置 字体 大 小 ， 如 图 17-15 所 示 。 
园 在 选项 栏 中 单 击 颜色 按钮 ， 弹 出 “ 拾 色 器 ” 

对 话 框 ， 选 择 文本 颜色 ， 如 图 17-16 所 示 。 py y 
园 单 击 “ 确 定 ”按钮 ， 设 置 文本 颜色 ， 如 图 | 图 17-17 设置 文本 颜色 


旧 17.2.3 “字符 ”和 “段落 ”面板 
“字符 ”面板 主要 是 用 来 编辑 字符 ， 这 个 面板 的 使 用 与 使 用 Word 的 方法 差不多 。“ 字 符 ” 
面板 如 图 17-18 所 示 。 
太 ” 国 通 过 调整 框 内 数值 的 大 小 ， 可 以 改变 字 的 大 小 。 
太 ”回调 整 字 距 ， 它 是 用 来 调整 相 邻 的 两 个 字 之 间 的 距离 的 。 注 意 有 一 点 ， 这 个 选项 只 是 在 选 
择 文字 的 情况 下 才 是 可 以 使 用 的 。 
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| 女 国 单 击 该 颜色 块 可 以 打开 颜色 选择 窗 
| 选择 颜色 。 


| “段落 ”面板 主要 用 于 对 输入 文字 的 自 
| 落 进行 管理 ， 如 图 17-19 所 示 。 


下 1 
i 
了 


Ey Ee Bs dy et 


美国 英 刘 ”> aa 洁 有 

图 17-18 “字符 ”面板 : 

妇 ” 国 调整 文字 垂直 方向 的 长 度 ， 用 它 可 以 调 ; 
整 出 文字 高 度 。 

太 ”国字 符 角 标 ， 这 是 用 以 调整 角 标 相对 于 | 图 17-19 “段落 ”面板 


水 平 线 的 高 低 的 选 框 。 如 果 是 一 个 正 数 ; 六 转调 整 段落 的 左 缩 进 。 即 整个 段落 左边 
的 话 ， 表 示 角 标 是 一 个 上 角 标 ， 它 们 将 : 。” 留 出 的 空间 。 
出 现在 的 文字 的 右上 角 ， 而 如 果 是 负 的 ; 六“ 转调 整 文字 的 右 缩 进 。 
话 ， 则 它们 将 代表 下 角 标 。 ; 六 国 调 整 首 行 的 堪 缩 进 。 
太 辆 这 个 选项 用 以 调整 文字 两 行 之 间 的 ; 太 者 段落 前 的 附加 空间 。 
距离 。 ; 太 转 段 落后 的 附加 空间 。 
太 国 它 用 以 调整 一 个 字 所 占 的 横向 空间 的 | 太 ”各 头 尾 法 则 设置 ， 用 来 选取 换行 集 ， 包 
大 小 ， 但 是 文字 本 身 的 大 小 则 不 会 发 生 ; 。” 括 无 、 弱 和 最 大 3 种 。 
改变 。 ; 大 间距 组 合 设置 ， 选 取 内 部 字符 间距 集 ， 
太 ” 国 调整 文字 的 横向 方向 的 长 度 。 | 用 户 可 自行 设计 。 


滤 镜 ， 也 被 称 为 增 效 工 具 ， 它 简单 易 用 ， 功 能 强大 ， 内 容 丰 
富 ， 样 式 繁多 。 同 时 ， 它 也 是 Photoshop 中 最 神奇 的 魔法 师 ， 使 用 滤 镜 命令 ， 可 以 设计 出 许多 超 
乎 想象 的 图 像 效 果 。 


轩 17.3.1 ”浮雕 效果 
浮雕 效果 模拟 凸凹 不 平 的 浮雕 效果 ， 具 

体操 作 步 又 如 下 。 

团 执行 “文件 ” |“ 打开 ”命令 ， 打 开 图 像 文 
件 “ 浮 雕 效果 :jpg”， 如 图 17-20 所 示 。 

园 执行 “ 滤 镜 ”| “风格 化 ”| “浮雕 效 果 ” 命 令 ， 
打开 “浮雕 效 果 ” 对 话 框 ， 如 图 1721 所 示 。 

国 在 “浮雕 效果 ”对 话 框 中 ， 设 置 “ 角 度 ” 
为 135 度 、“ 高 度 ” 为 3 像素 、“ 数 量 ” 为 
68%， 单 击 “ 确 定 ” 按 钮 ， 设 置 浮雕 后 的 效 
果 如 图 17-22 所 示 。 


| / 使 用 滤 镜 制作 特效 图 像 


图 17-20 打开 图 像 文件 
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二 
日 wo% 回 


昔 萎 大 小 (9; 引 | 方 队 


图 17-24 “马赛 克 ” 对 话 框 


图 17-22 ”浮雕 效果 图 17-25 “马赛克 效果 
中 17.3.2 ”马赛克 . 虽 17.3.3 ”高 斯 模糊 
马赛 克 可 以 分 割 图 像 成 若干 形状 随机 的 高 斯 模糊 是 最 有 使 用 价值 的 模糊 滤 镜 之 
小 块 ， 并 在 小 块 之 间 增加 深 色 的 颖 阶 ， 具 体 ; 一 。 它 可 以 通过 控制 模糊 半径 的 数值 快速 对 
操作 步骤 如 下 。 图 像 进行 “高 斯 模糊 ”， 产 生 轻 微 柔 化 图 像 
团 执行 “文件 ”| “打开” 命令， 打开 图 像 文 | ee 具体 操作 步骤 
件 “ 马 赛 克 jpg”， 如 图 17-23 所 示 。 | 如 下 。 


| 国 执行 “文件 " |“ 打开 ”命令 ， 打 开 图 像 广 
| 件 “ 高 斯 模糊 jpg”， 如 图 17-26 所 示 。 


Sha 
与 中 


日 
外 


图 17-23 ”打开 图 像 文件 


园 执行 “ 滤 镜 ”| “像素 化 ” |“ 马赛克” 命令 ， 
打开 “马赛 克 ” 对 话 框 ， 如 图 17-24 所 示 。 


图 17-26 打开 图 像 文件 

国 在 对 话 框 中 设置 “单元 格 大 小 ”为 5 方形 ， 加 执行 “ 滤 镜 ”|“ 模 糊 ”|“ 高 斯 模糊 ” 命 
单 击 “ 确 定 ”按钮 ， 设 置 马 赛 克 效 果 ， 如 | 。。 令 ， 打 开 “ 高 斯 模糊 ” 对话 框 ，“ 半 径 ” 
图 17-25 所 示 。 : 设 为 2， 如 图 17-27 所 示 。 
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. | 园 执行 “小 镜 ”| “模糊 ”| “动感 模糊 ”全 
| 。 令 ， 打开 “动感 模糊 ”对 话 框 ， 将 “ 距 
离 ” 设 为 10， 如 图 17-30 所 示 。 


日 to% 加 


二 NJ: 国 和 


图 17-27 绘制 相国 | 
园 单 击 “确定” 按钮 ， 设 置 高 斯 模糊 效果 ， 从 | 
图 17-28 可 以 看 到 图 像 产生 的 模糊 效果 。 ”| 


大小 亲朋 起 志和 亲口 


图 17-30 “动感 模糊 ”对 话 框 


| 因 单 击 “确定 ”按钮 ， 设 置 动感 模糊 效果 ， 如 
: 图 17-31 所 示 。 


0 
(4 


” 


EE 


| 


图 17-28 高 斯 模糊 效果 


个 17.3.4 ”动感 模糊 
动感 模糊 滤 镜 产生 运动 模糊 的 效果 ， 效 | 


果 类 似 于 用 过 长 的 曝光 时 间 给 快速 运动 的 物 | 人 
体 拍照 。 如 果 只 想 使 部 分 或 某 一 层 上 的 图 像 | 本 所 寺 inirnnnrinina 


曾 加 动感 模糊 效果 ， 可 选取 部 分 图 像 或 某 一 ， 叶 ”主要 有 以 下 参数 : I 
层 对 其 进行 模糊 处 理 。 使 用 动感 模糊 滤 镜 的 “ ! 。 角度 。 用 来 设置 动感 模 籽 的 方向 。 参数 的 取 具 
具体 操作 步骤 如 下 。 : ee We he ee 
国 执行 “文件 " |“ 打开” 命令， 打开 图 像 文 | 和 局 人 生生 
“动感 模糊 jpg”， 17-29 所 示 。 : 
本 二 伟人 9 让 轩 1723 和 及 | 1 距离 ， 用 来 调整 处 理 图 像 的 模 业 强度 。 参 数 上 
| 上 1 取 值 范围 为 从 1~999， 设 置 数值 越 大 则 模糊 程度 越 上 
| 是 强 ， 相 反 取 值 越 小 ， 产 生 的 模糊 程度 越 弱 。 


: | 
,上 17.3.5 ”水波 滤 镜 

;有 时 我 们 看 到 图 片上 的 水 波纹 效果 很 
棒 ， 其 实 很 多 都 是 用 Photoshop 的 滤 镜 生成 
; 的 ， 具 体操 作 步 骤 如 下 。 
: 回 启动 Photoshop CC， 执 行 “ 文 件 ”|“ 打 开 ” 
- | 命令 ， 弹 出 “打开 ”对 话 框 ， 在 该 对 话 框 
图 17-29 打开 图 像 文件 | 中 选择 图 像 文件 “水 波 滤 镜 .jpg”， 单 击 


> 
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“确定 ”按钮 ， 打 开 图 像 文件 ， 如 图 17-32 | 


图 17-32 ”打开 图 像 文件 
园 执行 “ 滤 镜 ” |“ 扭曲” |“ 水波” 命令, 弹 | 

出 “水 波 ” 对 话 框 ， 在 弹出 的 对 话 框 中 将 | 
“起 伏 ” 设 置 为 7， 如 图 17-33 所 示 。 | 


Os 


“确定 ”按钮 ， 即 可 设置 扭曲 效果 ， 如 | 


图 17-34 ” 捏 曲 效果 
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文字 是 信息 的 主要 载体 方式 ， 是 网 站 构成 的 基础 ， 很 多 人 忽 
略 了 文字 排版 的 重要 性 。 在 网 页 制作 过 程 中 ， 文 字 是 最 常用 的 对 象 ， 我 们 可 以 制作 一 些 特效 文 
字 作 为 网 页 标题 ， 来 增加 网 页 的 美观 性 ， 吸 引 浏 览 者。 利用 Photoshop 可 以 制作 形态 各 异 的 网 页 
特效 文字 ， 下 面 就 来 介绍 几 种 常见 的 网 页 特效 文字 的 制作 方法 。 


国 17.4.1 实战 1 一 一 使 用 滤 镜 制作 特效 广告 图 
使 用 滤 镜 制作 图 像 边框 效果 如 图 17-35 所 | 命令 ， 打 开 图 像 文件 “边框 jpg”， 如 
示 ， 具 体操 作 步 又 如 下 。 17-36 所 示 。 


a 


图 17-35 ”图像 边框 效果 


原始 文件 :原始 文件 /CH17/ 边 框 jpg | 图 1736 打开 图 像 文件 
终 文 件 ， 最终 文 边 | 
最 终 文件 : 最 终 文件 /CH17/ 边 框 psd 园 迁 择 工具 箱 中 的 “钢笔 工具 ”， 在 图 像 中 给 
国 启动 Photoshop CC， 执行“ 文件 ”| “打开” 制 出 一 个 形状 ， 如 图 17-37 所 示 。 


ETITEEIETEE 识 党 实录 “ee®@ 


图 17-37 绘制 形状 


园 执行 “选择 ”| 


“ 反 向 ”| 命令 ， 反 选 图 


如 图 17-38 所 示 。 


图 17-38 反选 图 像 


嘲 17.4.2 实战 2 一 制作 风 页 特 六 


7 


下 面 制作 网 页 特效 文字 ， 效 果 如 图 


所 示 ， 具 体操 作 步 骤 如 下 。 


有 下 


2 


&. 


图 17-41 网 页 特效 文字 
原始 文件 : 原始 文件 /CH17/ 网 页 特效 文字 .jpg 
最 终 文件 :最终 文件 /CH17/ 网 页 特效 文字 .psd 


回 启动 Photoshop CC， 执行“ 文件” |“ 打开” 


命令 ， 打 开 图 
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像 文 件 “ 特 效 文字 jpg”， 


17-41 


如 | 


| 加 执行 “ 滤 镜 ” | “ 滤 镜 库 ?” | “ 半 调 图 案 ” 命令 ， 


打开 “染色 玻璃 ”对 话 框 ， 如 图 17-39 所 示 。 


图 17-39 “染色 玻璃 ”对 话 框 


园 单 击 “确定 ”按钮 ， 填 充 选区 ， 如 图 17-40 


图 17-40 填充 选区 


图 17-42 所 示 。 


: 图 17-42 打开 图 像 文件 
| 园 选择 工具 箱 中 的 “ 横 排 文字 工具 ”， 在 先 
| 项 栏 中 将 字体 大 小 设 为 100， 字 体 颜色 设 


为 c70000， 输 入 文字 “ 爱 你 一 


生 ”， 如 图 


@ 一 ee 一 第 17 章 本 大 ER 和 本 

17-43 所 示 。 | 国 执行 “ 滤 镜 ”|“ 像 素 化 ” |“ 点 状 化 ” 命 

es me em ee oe i ” 令 ， 打开 “点 状 化 ”对 话 框 ， 将 “单元 格 
大 小 ”设置 为 5， 如 图 17-47 所 示 。 


点 化 Ez 
[er 
图 17-43 输入 文字 : RS A 
一 i |: 单元 格 大 小 吕 ) = | 
国 执行 “ 滤 镜 ” |“ 模糊” |“ 高 斯 模糊 ” 命 |‖ : 8 


令 ， 打 开 是 否 格式 化 文字 提示 框 ， 如 图 ; 
17-44 所 示 。 | 


图 17-47 “点 状 化 ”对 话 框 
rr ] | 回 单 击 “ 确 定 ”按钮 ， 设 置 点 状 化 效果 ， 如 图 


17-48 所 示 。 


| Od 


CR a 


图 17-44 ”格式 化 文字 提示 框 | 
园 单机 “确定 ”按钮 ， 打 开 “ 高 斯 模糊 ” 对话 | 
框 ， 将 “半径 ”设置 为 2， 如 图 17-45 所 示 。 


日 0% 加 


he 一 钙 : 图 17-48 设置 点 状 化 效果 


轩 17-45 “高 斯 模糊 ”对 活检 | 园 执行 “图 层 ”|“ 图 层 样式 ”| “投影 ” 命 
令 ， 打 开 “ 图 层 样式 ”对 话 框 ， 如 图 17-49 


园 单 击 “ 确 定 ”按钮 ， 设 置 模糊 效果 ， 如 图 | 


17-46 所 示 。 所 不 。 


le 
Er TT 


本 : 图 17-49 “图 层 样 式 ” 对 话 框 
图 17-46 设置 模糊 效果 | 园 单 击 勾 选 “内 发 光 ” 选 项 ， 在 弹出 的 对 话 杠 
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ET 刘 堂 六 录 。。 一 全 
中 设置 相应 的 参数 ， 如 图 17-50 所 示 。 
加 单 击 “ 确 定 ” 按 钮 ， 设 置 图 层 样式 ， 如 图 17-51 所 示 。 


ss | | Tso 


EE 一 人 
搁 动 0 人 0 % 


EY | 


图 17-50 设置 内 发 光 图 17-51 设置 图 层 样式 


| 7 ‘ 课 后 练习 
@ 
一 、 填 空 题 
1. 图 层 的 样式 包含 了 许多 可 以 自动 应 用 到 图 层 中 的 效果 , 包括 、  、 
、 描 边 、 图 案 填 充 等 效果 。 
2. 在 Photoshop 中 ， 文 字 工 具 包 括 
二 、 操 作 题 


利用 滤 镜 制作 模糊 效果 ， 效 果 如 图 17-52 所 示 。 


1 执行 < 泡 镜 " | “模糊 ”| “动感 模糊 ” 命令， 上 
1 打开 “动感 模糊 ”对 话 框 ， 将 “距离 ”设置 为 
上 10， 单 击 “确定 ”按钮 ， 设 置 动感 模糊 效果 。 。 用 
图 17-52 模糊 效果 | 


最 终 文件 : 最 终 文件 /CH17/ 习 题 jpg 


在 网 站 设计 中 网 页 特效 文字 的 设计 也 是 非常 重要 的 ， 漂 亮 
观 的 特效 文字 可 以 大 大 增加 网 页 的 美观 程度 。 本 章 重 点 介绍 图 层 和 图 层 样式 的 应 用 、 文 字 工 具 
的 使 用 ， 以 及 常见 的 网 页 特效 文字 的 制作 。 
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第 18 章 


6 网 页 切片 输出 与 动画 制作 


本 章 导读 
切片 就 是 将 一 幅 大 图 像 分 割 为 一 些小 的 图 像 切 
片 ， 然 后 在 网 页 中 通过 没有 间距 和 宽度 的 表格 重新 将 
这 些小 的 图 像 没有 缝隙 地 拼接 起 来 ， 成 为 一 幅 完整 的 
图 像 。 这 样 做 可 以 减少 图 像 的 大 小 ， 减 少 网 页 的 下 载 
时 间 ， 还 能 将 图 像 的 一 些 区 域 用 HTML 来 代替 。 


技术 要 点 

六” 创建 与 编辑 切片 
克 ”保存 网 页 图 像 

友 ”创建 GIF 动画 


ETEEIDETEE 识 堂 闫 录 。。 一 全 


18 | 创建 与 编辑 切片 : 


切片 就 是 将 一 幅 大 图 像 分 割 为 


页 中 通过 没有 间距 和 宽度 的 表格 重新 将 这 些小 的 图 像 没 有 缝隙 地 拼接 起 来 ， 成 为 一 幅 完 整 的 图 


一 些小 的 图 像 切 片 ， 然 后 在 网 


像 。“ 切 片 工 具 ” 是 Photoshop 软 件 自 带 的 一 个 平面 图 片 切割 工具 。 使 用 “切片 工具 ”可 以 将 一 


个 完整 的 网 页 切割 成 许多 小 图 片 ， 以 便于 网 络 上 的 下 载 。 
国 18.1.1 切片 的 注意 事项 


“切片 工具 ”是 Photoshop 软 件 自 带 的 一 个 平面 图 片 切割 工具 。 使 用 “切片 工具 ”可 以 将 一 


个 完整 的 网 页 切割 成 许多 小 图 片 ， 以 便于 网 络 上 的 下 载 。 
除了 减少 下 载 时 间 之 外 ， 切 片 也 还 有 其 他 一 些 优点 。 
友 制作 动态 效果 : 利用 切片 可 以 制作 出 各 种 交互 效果 。 


六 ”优化 图 像 : 完整 的 图 像 只 能 使 用 一 种 文件 格式 ， 应 用 一 种 优化 方式 ， 而 对 于 作为 切片 的 各 
幅 小 图 片 ， 可 以 分 别 对 其 优化 ， 并 根据 各 幅 切片 的 情况 ， 还 可 以 存 为 不 同 的 文件 格式 。 这 


样 既 能 够 保证 图 片 质量 ， 又 能 够 使 得 图 片 变 小 。 


太 ”创建 链接 : 切片 制作 好 之 后 ， 就 可 以 对 不 同 的 切片 制作 不 同 的 链接 了 ， 而 不 需要 在 大 的 图 


片上 创建 热 区 了 。 


上 18.1.2 切片 方法 
利用 “切片 工具 ”可 以 快速 地 进行 网 页 的 切割 制作 ， 具 体操 


作 步 骤 如 下 。 


国 执行 “文件 ” |“ 打开 ”命令 ， 打 开 图 像 文 件 “ 切 片 jpg”， 选 择 工 具 箱 中 的 “切片 工具 ”， 如 


图 18-1 所 示 。 


园 将 光标 置 于 要 创建 切片 的 位 置 ， 按 住 鼠 标 左 键 拖 动 ， 拖 动 到 合适 的 切片 大 小 绘制 切片 ， 如 图 


18-2 所 示 。 


香 莱 护 衣 加 |: 香 茵 护 衣 。 


二 -| Tt 


se 


图 18-1 打开 图 像 文件 


用 18.1.3 ”编辑 切片 选项 
如 果 切 片 大 小 不 合适 ， 还 可 以 调整 和 编辑 切片 ， 具 体操 作 步 
国 打开 创建 好 切片 的 图 像 文件 ， 右 击 鼠 标 ， 在 弹出 的 快捷 菜单 


图 18-2 绘制 切片 


又 如 下 。 
选择 “划分 切片 ”命令 ， 如 图 


18-3 所 示 。 
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园 弹出 “划分 切片 ”对 话 框 ， 将 划分 切片 的 “水 平 划分 为 ”设置 为 3，“ 垂 直 划分 为 ”设置 为 5， 
如 图 18-4 所 示 。 


工 
把 
. 
当 


a 一 - 。 


悦己 


图 18-3 选择 “划分 切片 ”命令 图 18-4 “划分 切片 ”对 话 框 
园 单 击 “ 确 定 ” 按 钮 ， 划 分 切片 ， 如 图 18-5 所 示 。 在 图 像 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “ 编 
辑 切 片 选项 ”命令 。 
轩 弹出 “切片 选项 ”对 话 框 ， 在 对 话 框 中 可 以 设置 切片 的 URL、 目 标 、 信 息 文本 等 ， 如 图 18-6 
所 示 。 


香 莫 护 衣 。 EYE 
于 衣 新 时 代 - 切实 (S): 图 和 


名 称 (N): | 
URLU): 
目标 (R): 
信息 文本 (M): 
和 标记 (A): 


尺寸 
X00): 
YY): 0 


切片 背景 类 型 (D): 无 
= 


: i 
图 18-5 划分 切片 图 18-6 “切片 选项 ”对 话 框 


影响 网 页 表现 的 最 大 瓶颈 是 网 络 的 宽带 。 网 页 元 素 中 ， 图 片 
Se 影响 网 页 打开 的 速度 。 所 以 网 页 图 片 文件 越 小 ， 打开 网 页 直人 浏览 者 才 
有 兴趣 继续 看 网 页 。 
但 18.2.1 认识 网 页 中 支持 的 图 像 格式 


图 像 文件 格式 是 记录 和 存储 影像 信息 的 格式 。 对 数字 图 像 进 行 存储 、 处 理 、 传 播 ， 必 须 采 
用 一 定 的 图 像 格式 ， 也 就 是 把 图 像 的 像素 按照 一 定 的 方式 进行 组 织 和 存储 ， 把 图 像 数据 存储 成 


259 


CEITEEIDETEE 识 堂 闫 录 。。 一 全 


文件 就 得 到 图 像 文件 。 图 像 文 件 格式 决定 了 应 该 在 文件 中 存放 何 种 类 型 的 信息 ， 文 件 如 何 与 各 
种 应 用 软件 兼容 ， 文 件 如 何 与 其 他 文件 交换 数据 。 
图 片 文件 的 格式 是 计算 机 存储 这 幅 图 的 方式 与 压缩 方法 ， 要 正确 地 对 不 同 的 使 用 目的 来 选 
择 合适 的 格式 。 

PSD: 是 Photoshop 软 件 的 格式 。 

BMP: 是 微软 公司 图 形 文件 的 点 位 图 格式 ， 例 如 Windows 自 身 的 画图 程序 绘画 默认 生成 
BMP 格式 的 图 片 。 

JPEG: 是 与 平台 无 关 的 格式 ， 支 持 最 高 级 别 的 压缩 。 由 于 JPEG 文 件 大 小 可 以 远 远 小 于 
BMP， 所 以 JPEG 广 泛 应 用 于 网 页 制作 领域 。 

GIF: GIF 图 片 以 8~256 色 存储 图 片 数据 。GIF 图 片 支持 透明 度 、 压 缩 、 交 错 和 多 图 像 图 片 
(动画 GIF) ，GIF 透 明度 不 是 alpha 通 道 透 明度 ， 所 以 不 能 支持 半 透 明 效果 。 适 合 网 上 传输 。 

PNG: 图 片 格式 可 以 以 任何 颜色 深度 存储 图 片 ， 它 也 是 与 平台 无 关 的 格式 。 支 持 透明 度 、 
压缩 。 正 浏览 器 对 PNG 支 持 不 是 很 好 ， 所 以 目前 网 页 制作 中 很 少 使 用 。 
由 于 PNG 的 高 品质 及 透明 度 支持 ，Flash 动 画 制作 中 比较 常用 。 一 般 适 用 于 颜色 少 的 图 片 ， 
如 标志 、 小 图 标 和 网 页 动画 广告 。 


用 18.2.2 课堂 练 一 练 一 一 保存 网 页 图 像 

当 我 们 在 网 上 看 到 精美 的 图 片 时 需要 将 它们 进行 保存 ， 以 备 未 来 使 用 ， 这 时 就 需要 对 图 片 
进行 存储 ， 在 存储 的 时 候 也 会 相应 地 出 现 一 些 文件 格式 待 选择 。 右 击 选择 图 片 ， 在 弹出 的 菜单 
中 选择 “图 片 另存 为 ”命令 ， 如 图 18-7 所 示 ， 选 择 以 后 弹出 “保存 图 片 ” 对 话 框 ， 选 择 文件 存 
储 的 文字 ， 如 图 18-8 所 示 。 单 击 “确定 ”按钮 ， 即 可 保存 图 像 。 


Bai 略 ms RH 


FT PEG Cjpg) 


~ ers 


图 18-7 “图片 另存 为 ”选项 图 18-8 “保存 图 片 ” 对 话 框 


GIF 动画 是 在 一 段 时 间 内 显示 的 一 系列 图 像 或 帧 ， 当 每 一 帧 
较 前 一 帧 都 有 轻微 的 变化 时 ， 连 续 快 速 地 显示 帧 ， 就 会 产生 运动 或 其 他 变化 的 视觉 效果 。 
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肯 18.3.1 认识 “动画 〈 帧 ) ”面板 

GIF 动画 制作 相对 较为 简单 ， 我 们 打开 } 图 层 中 。 通 过 对 每 一 帧 隐藏 或 显示 不 同 的 图 
“时 间 轴 ” 面 板 后 ， 会 发 现 有 帧 动画 模式 和 | 层 可 以 改变 每 一 帧 的 内 容 ， 而 不 必 一 遍 又 一 
时 间 轴 动画 两 种 模式 可 以 选择 。 | 遍地 复制 和 改变 整个 图 像 。 每 个 静态 元 素 只 

硕 动画 相对 来 说 直观 很 多 ， 在 动画 面板 ; 需 创 建 一 个 图 层 即 可 ， 而 运动 元 素 则 可 能 需 
会 看 到 每 一 帧 的 缩 略图 。 制 作 之 前 需要 先 设 ; 要 若干 个 图 层 才能 制作 出 平滑 过 渡 的 运动 效 
re | 果 。 图 18-9 所 示 为 “时 间 轴 ”面板 。 
分 层 图 。 然 后 在 动画 面板 新 建 帧 ， 把 展示 的 ， 
动画 分 帧 设置 好 ， 再 设 定好 时 间 和 过 渡 等 即 ; 
可 播放 预览。 Re 

在 帧 动画 的 所 有 元 素 都 放置 在 不 同 的 |; 图 18-9 “时 间 轴 ” 面 板 
上 用 18.3.2 课堂 练 一 练 一 创建 动画 

GIF 动 画 是 较为 常见 的 网 页 动画 。 这 种 | 。” 间 轴 ”面板 ， 在 “时 间 轴 ”面板 中 自动 生 
动画 的 特点 ， 它 是 以 一 组 图 片 的 连续 播放 来 ; ”成 一 帧 动画 ， 如 图 18-12 所 示 。 
产生 动态 效果 ， 这 种 动画 是 没有 声音 的 。 当 | 
然 制作 GIF 动画 的 软件 有 很 多 ， 最 常用 的 就 是 | 
Photoshop， 下 面 使 用 Photoshop 制 作 帧 动画 ， | 
如 图 18-10 所 示 3 帧 动画 。 具 体操 作 步 又 如 下 。 

A > 


图 18-10 原始 文件 
原始 文件 : 原始 文件 /CH18/2.jpg、3.jpg、4.jpg 
最 终 文件 最终 文 件 /CH18/ 动 画 .gif 


图 像 文 | 


国 执行 “文件 ” |“ 打开 ”命令 ， 打 开 
件 “2.jpg”， 如 图 18-11 所 示 。 


“ 户 目 月 国 N AN 


本 
可 
Z 
4 
依 
EB 
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画 
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图 18-11 打开 图 像 文件 : 
因 执行 “窗口 ” |“ 时 间 轴 ”命令 ， 打 开 “时 | 


“时 间 轴 ”面板 
单 击 “ 时 间 轴 ” Cs “复制 所 选 
帧 ”按钮 ， 复 制 当 前 帧 ， 如 图 18-13 所 示 。 


文档 :213.6KJ213.6K 


图 18-12 


图 18-13 复制 所 选 帧 


同样 的 方法 再 复制 一 个 帧 ， 


如 图 18-14 


图 18-14 复制 所 选 帧 
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园 执行 “文件 ”| “ 置 入 ”命令 ,弹出 “ 置 入 ”对 话 框 ， 在 对 话 框 中 选择 要 置 入 的 文件 “2.jpg”， 
如 图 18-15 所 示 。 

国 单 击 “ 置 入 ”按钮 ， 将 “2.jpg” 文 件 置 入 ， 并 调整 置 入 文件 与 原来 的 背景 图 像 一 样 大 小 ， 如 
18-16 所 示 。 


[出 


ss IN 3jpg 


图 18-15 “ 置 入 ” 对 话 框 图 18-16 置 入 图 像 
同步 又 $-6 置 入 图 像 文件 “3jpg”， 如 图 18-17 所 示 。 
园 在 “时 间 轴 ” 面 板 中 选择 第 1 帧 ， 在 “图 层 ” 面 板 中 ， 将 3 和 4 图 层 隐藏 ， 如 图 18-18 所 示 。 


二 QQewhsNnNan 


图 18-17 置 入 图 像 图 18-18 隐藏 图 层 2 和 图 层 3 
园 在 “时 间 轴 ”面板 中 选择 第 1 帧 ， 单 击 该 帧 右 下 角 的 三 角 按钮 设置 延迟 时 间 为 2 秒 ， 如 图 18-19 所 示 。 
四 同样 设置 第 2 帧 的 延迟 为 2 秒 ， 在 “图 层 ” 面 板 中 ， 将 背景 层 和 图 层 4 隐 藏 ， 图 层 2 可 见 ， 如 图 
18-20 所 示 。 


senbka\n 


呈 
a 
T 
[ 
a 


. 
J 


日 


图 18-19 设置 帧 延迟 图 18-20 隐藏 图 层 3 和 背景 层 
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园 同样 设置 第 3 帧 的 延迟 为 2 秒 ， 在 “图 层 ”面板 中 ， 将 背景 层 和 图 层 3 隐藏 ， 图 层 4 可 见 ， 如 图 
18-21 所 示 。 


园 单 击 “动画 ”面板 底部 的 “播放 动画 ” 按 馈 国 播放 动画 ， 如 图 18-22 所 示 。 


图 18-21 隐藏 背景 层 和 图 层 2 图 18-22 播放 动画 


人 目 18.3.3 ”课堂 练 一 练 一 一 存储 动画 
存储 动画 效果 如 图 18-23 所 示 ， 具 体操 作 
步骤 如 下 。 
国 打开 制作 好 的 动画 文件 ， 执 行 “文件 ”|“ 存 
储 为 Web 所 用 格式 ”命令 ， 打 开 “ 存 储 为 
Web 格 式 ” 对 话 框 ， 如 图 18-24 所 示 。 
园 单 击 “ 存 储 ” 按 钮 ， 弹 出 “将 优化 结果 存 
储 为 ”对 话 框 ， 将 “文件 名 ”设置 为 “ 动 
画 .gif”，“ 格 式 ” 设 置 为 “ 仅 限 图 像 ” 选 


项 ， 如 图 18-25 所 示 。 图 18-23 gif 动画 效果 
加 FRR CE 1 
ls 
画 
品 
中 
| Bm 于 pp 
[i | [— “一 一 三 = 一 cd 
图 18-24 “存储 为 Web 格 式 ” 对 话 框 图 18-25 “将 优化 结果 存储 为 ”对 话 框 


园 单 击 “保存 ”按钮 ， 即 可 将 文件 保存 为 Gift 动画 ， 预 览 动画 效果 如 图 18-23 所 示 。 
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| 8 4 实战 应 用 一 一 优化 与 发 布 “ 企 业 


网 站 ”图 像 


下 面 将 教 你 如 何 对 图 像 文件 进行 优化 时 保持 文字 清晰 ， 而 且 获 得 最 佳 的 优化 效果 ， 具 体操 


作 步 骤 如 下 。 
国 打开 制作 好 的 网 页 文件 “优化 与 发 布 jpg”， 如 图 18-26 所 示 。 


1 月 国 己 月 国人 和 立志 了 


我 们 更 供 优质 的 严 品 


BEEED ~ Er 


oem MPNNDD 


名 


图 18-26 打开 文件 


园 执行 “文件 ” |“ 存储 为 Web 所 用 格式 ”命令 ， 打 开 “ 存 储 为 Web 格 式 ” 对 话 框 ， 单 击 “ 四 
联 ”， 然 后 选择 第 2 副 图 像 ， 如 图 18-27 所 示 。 


[四 | FT 加 省 入 [本命 名 ] 二 
多 wm 加 
a - #ie: ls 问 
| | 
加 忆 放 明度 hb 加 
[=] 江 绷 度 伤 鱼 。 驱 里 : 
Ea | 
5 加 
辣 儿 村 为 shen 
NT 


我们 村 化 优 押 的 产品 我 们 村 代位 历 的 产品 
原 戎 “diye jne” | 
oS 


1 
| 和 asco mrs = 


我们 村 做 优 后 的 产品 各 们 棋 供 代 后 的 产品 

oy any 信 [nr 
“本 加 择 ” 调 改 
1 部 2 


下 Et 0 和 
tj gi 二 -~ 
三 


政信 
“本 迁 笠 ” 调 
6 基 名 


35.198 
1 和 06 nps .三 


100 了 
半 秒 as6.6 prs .三 


[io 加 iB Gn | nem: 255 “十 和 机- zp 过 | 4 ri 
[| @F| EE [7 [ 3 ] 
图 18-27 “将 优化 结果 存储 为 ”对 话 框 
“存储 ”按钮 打开“ 将 优化 结果 存储 为 ”对 话 框 ， 如 图 18-28 所 示 。 
“保存 ”按钮 ， 即 可 优化 图 像 ， 如 图 18-29 所 示 。 
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“日 日 


六 
[eo 


@ 。 第 18 章 EWE 


re nf 


图 18-28 “将 优化 结果 存储 为 ”对 话 框 图 18-29 优化 结果 


| 8 5 课 后 练习 : 
@ 


一 、 填 空 是 | ~ 
1. 在 保存 编辑 过 的 图 片 时 ， 有 两 种 保存 | A 
图 片 的 方式 ， 、 i 上。 打开 网 页 图 像 文件 ， 执 行 “文件 ”| “存储 为 上 


ea ea eh de 


= re 和 
2. GIF 动 画 制作 相对 较为 简单 ， 我 们 打 时 于 于 和 于 玫 于 于 于 到 于 


开 “ 时 间 轴 ”面板 后 , 会 发 现 有 和: 
两 种 模式 可 以 选择 。 | 

二 、 操 作 题 : 
将 图 18-30 所 示 的 图 像 文 件 切割 成 网 页 ; 
文件 。 | 
原始 文件 : 原始 文件 /CH18/ 习 题 jpg | 1 
最 终 文件 : 最 终 文件 /CH18/ 习 题 html : 图 18-30 切割 网 页 


18 


如 果 网 页 上 的 图 片 较 大 ， 浏 览 器 下 载 整个 图 片 的 话 需要 花 很 
长 的 时 间 。 切 片 的 使 用 ， 使 得 整个 图 片 可 以 分 为 多 个 不 同 的 小 图 片 分 开 下 载 ， 这 样 下 载 的 时 间 
就 大 大 缩短 了 。 在 目前 互联 网 带宽 还 受到 条 件 限 制 的 情况 下 ， 可 运用 切片 来 减少 网 页 下 载 时 
间 ， 而 又 不 影响 图 片 的 效果 。 使 用 Photoshop 还 可 以 轻松 制作 出 GIF 动画 。 通 过 本 章 的 学 习 ， 希 
望 大 家 能 掌握 制作 动画 的 基本 方法 ， 以 及 网 页 图 像 切割 和 优化 的 方法 。 
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第 19 章 
设计 企业 网 站 实例 


本 章 导 读 
企业 网 站 是 以 企业 为 主体 而 创建 的 网 站 ， 该 类 型 


网 站 主要 包含 公司 介绍 、 产 品 、 服 务 等 几 个 方面 。 网 
站 通过 对 企业 信息 的 系统 介绍 ， 让 浏览 者 熟悉 企业 的 
情况 ， 了 解 企业 所 提供 的 产品 和 服务 ， 并 通过 有 效 的 
在 线 交流 方式 拱 建 起 潜在 客户 与 企业 之 间 的 桥梁 。 企 
业 网 站 建设 的 目的 是 为 了 提高 企业 形象 ， 让 越 来 越 多 
的 人 能 关注 公司 ， 帮 助 公司 获得 更 大 的 发 展 。 


技术 要 点 


房地产 类 网 站 概述 

创建 模板 

利用 模板 制作 网 站 二 级 页 面 
测试 站 点 

发 布 网 站 

网 站 运营 与 维护 
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企业 网 站 是 商业 性 和 艺术 性 的 结合 ， 同 时 也 是 一 个 企业 文化 
的 载体 ， 通 过 视觉 元 素 ， 承 接 企 业 的 文化 和 企业 的 品牌 。 制 作 企业 网 站 通常 需要 根据 企业 所 处 
的 行业 、 企 业 自 身 的 特点 、 企 业 的 主要 客户 群 ， 以 及 企业 最 全 的 资讯 等 信息 ， 才 能 制作 出 适合 
企业 特点 的 网 站 。 


用 19.1.1 企业 网 站 前 期 策划 
与 专业 网 站 或 大 型 电子 商务 网 站 相 比 ， 企 业 网 站 具有 明显 的 特点 。 企 业 网 站 并 不 一 定 要 规 

模 很 大 ， 也 不 一 定 要 建成 一 个 “门户 ”或 “平台 ”， 其 根本 目的 是 为 企业 进行 宣传 和 推广 。 企 

业 网 站 的 目的 决定 了 一 个 企业 网 站 并 不 需要 包罗 万 象 ， 也 不 一 定 像 电子 商务 网 站 那样 一 开始 就 

必须 拥有 各 种 完备 的 功能 。 

企业 网 站 的 功能 、 服 务 、 内 容 等 因素 应 该 与 企业 的 经 营 策略 相 一 致 ， 因 为 企业 网 站 是 为 企 

业经 营 服务 的 。 如 果 脱 离 了 这 个 宗旨 ， 网 站 是 无 法 为 企业 经 营 活动 发 挥 作 用 的 。 当 企业 发 展 到 

一 定 阶 段 ， 企 业 网 站 的 功能 和 表现 形式 需要 进行 升级 。 
企业 网 站 不 仅 代表 着 企业 的 网 络 品牌 形象 ， 同 时 也 是 开展 网 络 营销 的 根据 地 ， 网 站 建设 的 

水 平 对 网 络 营销 的 效果 有 直接 影响 。 调 查 表明 ， 许 多 知名 企业 的 网 站 设计 水 平 与 企业 的 品牌 形 

象 很 不 相称 ， 功 能 也 很 不 完善 ， 甚 至 根本 无 法 满足 网 络 营销 的 基本 需要 。 那 么 ， 怎 样 才能 建设 

一 个 真正 有 用 的 网 站 呢 ? 
首先 应 该 对 企业 网 站 可 以 实现 的 功能 有 一 个 全 面 的 认识 。 建 设 企业 网 站 ， 不 是 为 了 赶 时 

晓 ， 也 不 是 为 了 标榜 自己 的 实力 ， 而 是 让 企业 网 站 真正 发 挥 作用 ， 让 网 站 成 为 有 效 的 网 络 营销 

工具 和 网 上 销售 渠道 。 企 业 网 站 主要 有 以 下 功能 。 

太 ”公司 概况 ， 包括 公司 背景 、 发 展 历史 、 主 要 业绩 、 经 营 理念 、 经 营 目标 及 组 织 结构 等 ， 让 

户 对 公司 情况 有 一 个 概括 的 了 解 。 

六 ”产品 /服务 展示 : 浏览 者 访问 网 站 的 主要 目的 是 为 了 对 公司 的 产品 和 服务 进行 深入 的 了 解 。 

如 果 企业 提供 多 种 产品 服务 ， 利 用 产品 展示 系统 对 产品 进行 系统 的 管理 ， 包 括 产品 的 添加 与 

删除 、 产 品类 别 的 添加 与 删除 、 特 价 产 品 /最 新 产品 /推荐 产品 的 管理 、 产 品 的 快速 搜索 等 。 

太 ”产品 搜索 ， 如 果 公司 产品 比较 多 ， 无 法 在 简单 的 目录 中 全 部 列 出 ， 而 且 经 常 有 产品 升级 换 
代 ， 为 了 能 让 用 户 方便 地 找到 所 需要 的 产品 ， 除 了 设计 详细 的 分 级 目录 外 ， 增 加 关键 词 搜 
索 功能 不 失 为 有 效 的 措施 。 

太 ”信息 发 布 ， 网 站 是 一 个 信息 载体 ， 在 法 律 许可 的 范围 内 ， 可 以 发 布 一 切 有 利于 企业 形象 、 
顾客 服务 ， 以 及 促进 销售 的 企业 新 闻 、 各 种 促销 信息 、 招 标 信息 、 合 作 信息 和 人 员 招 聘 信 
息 等 。 

太 ”网 上 调查 : 通过 网 站 上 的 在 线 调 查 表 ， 可 以 获得 用 户 的 反馈 信息 ， 用 于 产品 调查 、 消 费 者 
行为 调查 、 品 牌 形象 调查 等 ， 是 获得 第 一 手 市 场 资料 的 有 效 调查 工具 。 

太 ”技术 支持 : 这 一 点 对 于 生产 或 销售 高 科技 产品 的 公司 尤为 重要 ， 网 站 上 除了 产品 说 明 书 之 
外 ， 企 业 还 应 该 将 用 户 关心 的 技术 问题 及 其 答案 公布 在 网 上 ， 如 一 些 常见 故障 处 理 、 产 品 
的 驱动 程序 、 软 件 工具 的 版 本 等 信息 资料 ， 可 以 用 在 线 提问 或 常见 问题 回答 的 方式 体现 。 

妇联 系 信息 : 网 站 上 应 该 提供 足够 详尽 的 联系 信息 ， 除 了 公司 的 地 址 、 电 话 、 传 真 、 邮 政 编 
码 、 网 管 E-mail 地 址 等 基本 信息 之 外 ， 最 好 能 详细 地 列 出 客户 或 者 业务 伙伴 可 能 需要 联系 
的 具体 部 门 的 联系 方式 。 
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太 ”辅助 信息 ! 有 时 由 于 企业 产品 比较 少 ， 网 页 内 容 显得 有 些 单调 ， 可 以 通过 增加 一 些 辅助 信 
息 来 弥补 这 种 不 足 。 辅 助 信息 的 内 容 比较 广泛 ， 可 以 是 本 公司 、 合 作 伙伴 、 经 销 商 或 用 户 
的 一 些 相关 产品 保养 及 维修 常识 等 。 
太 “ 当 一 个 企业 在 规划 自己 的 网 站 时 ， 首 先 应 明确 建站 的 目的 ， 还 要 对 网 站 的 功能 需求 进行 分 
析 ， 网 站 的 功能 也 决定 了 网 站 的 规模 和 需要 投入 的 资金 。 


国 19.1.2 房地产 网 站 建设 的 目的 
根据 不 同房 地 产 项 目的 定位 和 设计 理念 ， 相 应 的 网 站 在 制作 时 也 会 有 不 同 的 风格 和 特点 ， 

但 一 定 要 突出 其 项 目的 特点 ， 吸 引 购 买 者 注意 。 
企业 上 网 绝 大 多 数 是 为 了 介绍 自己 的 产品 和 服务 ， 希 望 能 够 通过 网 络 得 到 订单 。 本 例 房 地 

产 网 站 可 以 把 楼 盘 的 展示 作为 网 站 的 重点 。 页 面 的 插图 应 以 体现 房地产 为 主 ， 营 造 企业 形象 为 

辅 ， 尽 量 做 到 两 方面 能 够 协调 到 位 。 
房地产 网 站 建设 的 主要 目的 如 下 。 

六 ”提升 企业 形象 :对 于 房产 企业 而 言 ， 企 业 的 品牌 形象 至 关 重 要 。 买 房子 是 许多 人 一 生 中 的 
头等 大 事 ， 需 要 考虑 的 方面 也 较 多 。 因 开发 商 的 形象 而 产生 的 问题 ， 往 往 是 消费 者 决定 购 
买 与 否 的 主要 考虑 因素 之 一 。 

太 ”开拓 更 大 国内 国际 市 场 : 现在 通过 建立 网 站 ， 企 业 形 象 的 宣传 不 再 局 限于 当地 市 场 ， 而 是 
全 球 范围 的 宣传 。 企 业 信息 的 实时 传递 ， 与 公众 相互 沟通 的 即时 性 、 互 动 性 ， 弥 补 了 传统 
手段 的 单一 性 和 不 可 预见 性 。 

太 改变 营销 方式 ;传统 的 企业 营销 是 采取 主动 去 联系 客户 ， 如 企业 有 了 自己 的 网 站 ， 就 可 化 

主动 为 被 动 ， 让 潜在 的 客户 ， 通 过 网 站 得 到 他 们 要 的 资料 ， 再 通过 电子 邮件 或 电话 、 传 真 

等 方式 联络 ， 促 成 业务 。 

服务 更 加 周到 : 利用 网 站 可 以 提供 一 天 24 小 时 服务 ， 可 以 时 刻 更 新 网 页 内 容 ， 可 以 提供 网 

上 订单 、 网 上 反馈 等 互动 方式 。 

太 ”可 以 节省 资金 : 无 纸 化 的 网 页 可 取代 传统 的 楼 盘 介 绍 等 常 更 新 的 印刷 品 ， 客 户 传真 订单 、 
索取 有 关 资 料 介绍 等 传统 方式 可 直接 在 网 上 进行 。 降 低 运作 成 本 ， 增 强 市 场 竞争 力 ， 提 高 
经 济 效益 。 


| 9 网 站 的 版 面 布局 及 色彩 o 


企业 网 站 主要 功能 是 向 消费 者 传递 信息 ， 因 此 在 页 面 结构 设 
计 上 无 须 太 过 花哨 ， 标 新 立 异 的 设计 和 布局 未 必 适 合 企业 网 站 ， 企 业 网 站 更 应 该 注重 商务 性 与 
实用 性 。 


旧 19.2.1 草案 及 粗略 布局 
一 般 来 说 ， 企 业 网 站 首页 的 布局 比较 灵活 ， 着 重 设计 ， 这 里 所 说 的 布局 主要 是 指 内 页 的 版 
面 布 局 。 中 、 小 型 企业 网 站 的 内 页 布局 一 般 比较 简单 ， 即 内 页 的 一 栏 式 版 面 布局 ， 从 排版 布局 
的 角度 而 言 ， 我 们 还 可 以 设计 成 等 分 两 栏 式 、 三 栏 式 、 多 栏 式 ， 以 及 不 等 分 两 栏 式 、 三 栏 式 、 
多 栏 式 等 ， 但 因为 浏览 器 宽 幅 有 限 ， 一 般 不 宜 设 计 成 三 栏 以 上 的 布局 。 
在 版 面 布局 中 主要 是 考虑 导航 、 必 要 信息 与 正文 之 间 的 布局 关系 。 比 较 多 的 情况 是 采用 项 
部 放置 必要 的 信息 ， 如 公司 名 称 、 标 志 、 广 告 条 及 导航 条 ， 或 将 导航 条 放 在 左 侧 ， 正 文 放 在 右 


站 
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侧 等 ， 这 样 的 布局 结构 清晰 、 易 于 使 用 。 当 然 ， 你 也 可 以 尝试 这 些 布局 的 变化 形式 ， 例 如 ， 左 
右 两 栏 式 布局 ， 于 导航 ; 或 正文 不 等 两 栏 式 布置 ， 通 过 背景 
色 区 分 ， 分 别 放置 图 片 和 文字 等 。 在 设计 中 注意 多 汲取 好 的 网 站 设计 的 精髓 。 


19.2.2 淆 官网 站 的 名 


企业 网 站 给 人 的 第 一 印象 是 网 站 的 色彩 ， 因 此 网 站 的 色彩 搭配 是 非常 重要 的 。 一 般 来 说 ， 
一 个 网 站 的 标准 色彩 不 应 超过 3 种 ， NS 让 人 眼花 红 乱 。 标 准 色彩 用 于 网 站 的 标志 、 标 
题 、 导 航 栏 和 主 色 块 ， 给 人 以 整体 统一 的 感觉 。 其 他 色彩 在 网 站 中 也 可 以 使 用 ， 但 只 能 作为 点 
缀 和 衬托 ， 决 不 能 喧 宾 夺 主 。 如 本 运 所 最 信 间 的 允 表 达 最 丰富 的 含义 ， 体 现 企 业 形 象 ， 是 网 
页 设计 人 员 需 要 不 断 学 习 、 探 索 的 课题 。 如 何 进 行 色彩 搭配 是 一 门 学 问 。 
1. 运用 相同 色 系 色彩 

所 谓 相同 色 系 ， 是 指 几 种 色彩 在 色相 环 上 位 置 十 分 相近 ， 同 一 色 系 不 同 明度 的 几 种 色彩 拱 
配 的 优点 是 易于 使 网 页 色彩 趋 于 一 致 ， 对 于 网 页 设计 新 手 有 很 好 的 借鉴 作用 ， 这 种 用 色 方 式 容 
易 塑 造 网 页 和 谐 统一 的 氛围 ， 缺 点 是 容易 造成 页 面 的 单调 ， 因 此 往往 利用 局 部 加 入 对 比 色 来 增 
加 变化 ， 如 局 部 对 比 色 彩 的 图 片 等 。 这 种 方法 不 失 为 一 种 设计 的 好 方法 。 
2. 运用 对 比 色 或 互补 色 

所 谓 对 比 色 ， 是 指 色 相 环 相距 较 远 ， 大 约 在 100&#176 左 右 ， 视 觉 效 果 鲜 亮 、 强 烈 ， 而 互补 

色 则 是 色相 环 上 相距 最 远 的 两 种 色彩 ， 即 相距 180&#176， 其 对 比 关 系 最 强烈 、 最 富有 刺激 性 ， 
往往 使 画面 十 分 突出 ， 这 种 用 色 方 式 容易 塑造 活泼 、 韵 动 的 网 页 效果 ， 特 别 适 合体 现 轻松 、 积 
极 的 素材 的 网 站 ， 缺 点 是 容易 造成 色彩 的 花哨 ， 使 用 中 注意 色彩 使 用 的 度 。 
3. 使 用 过 渡 色 

过 渡 色 能 够 神奇 地 将 几 种 不 协调 的 色彩 统一 起 来 ， 在 网 页 中 合理 地 使 用 过 渡 色 能 够 使 你 的 
色彩 搭配 技术 更 上 一 层 楼 。 过 渡 色 包括 两 种 色彩 的 中 间 色 调 、 单 色 中 混入 黑 / 白 / 灰 进行 调和 ， 
及 单 色 中 混入 相同 色彩 进行 调和 等 ， 可 以 自己 尝试 调配 。 

企业 网 站 的 色彩 可 以 选择 蓝 色 、 绿 色 、 红 色 等 ， 在 此 基础 上 再 搭配 其 他 色彩 。 另 外 可 以 
使 用 灰色 和 白色 ， 这 是 企业 网 站 中 最 常见 的 颜色 。 因 为 这 两 种 颜色 比较 中 庸 ， 能 和 任何 色彩 拱 
配 ， 使 对 比 更 强烈 ， 突 出 网 站 品质 和 形象 。 


由 于 网 站 的 二 级 页 面 大 部 分 风格 相似 ， 若 一 一 制作 这 些 风格 
相似 的 网 页 ， 不 仅 浪 费时 间 而 且 对 后 期 的 网 站 维护 也 不 方便 ， 这 时 就 可 以 运用 Dreamweaver CC 
的 模板 功能 。 


什 19.3.1 制作 顶部 文件 
顶部 文件 如 图 19-1 所 示 ， 主 要 是 网 站 的 
Banner 图 片 ， 具 体制 作 步骤 如 下 。 
回 启动 Dreamweaver CC， 执 行 “ 文 件 ”|“ 新 
建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 如 i 
图 19-2 所 示 。 aan NN WON PS Ex MAES SEAN 
园 在 对 话 框 中 选择 “ 空 模板 ”| “HTML 模 板 ” 图 19-1 网 站 顶部 文件 
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选项 ， 单 击 “ 创 建 ”按钮 ， 创 建 一 个 空白 模板 网 页 ， 如 图 19-3 所 示 。 


Dm 2m so aa mm 
TE 


EE 30 Eon SOW we -ol 


[3 


CIE) wo 时 
图 19-2 “新 建文 档 ” 对 话 框 图 19-3 ”创建 空 模板 
执行 “插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 将 “ 行 数 ” 设 为 2，“ 列 ”设置 为 !1，“ 表 
格 宽度 ” 设 为 982， 如 图 19-4 所 示 。 
回 单 击 “确定 ”按钮 ， 插 入 2 行 1 列 的 表格 1， 在 属性 面板 中 将 “对 齐 ” 设 置 为 “居中 对 齐 ”， 


19-5 所 示 。 
es er ee ee #9 aly BPW we ss. 四 ( 
aa a 
后 二 EE EE 3 
a 
雪 格 大 小 上 去 和 
笋 至 2 殉 上 
责 格 垃 变 : 98| [像素 =] 
边框 煌 细 0 售 系 
元 村 过 古国 | B 


单元 相 间 下 


图 19-4 “表格 ” 对 话 杠 图 19-5 设置 表格 对 齐 
园 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 执 行 “插入 ”|“ 图 像 ” 命 令 ， 弹 出 “选择 图 像 源 文件 ”对 
话 框 ， 如 图 19-6 所 示 。 
国 选择 图 像 19jpg， 单 击 “ 确 定 ”按钮 ， 插 入 图 像 文件 ， 如 图 19-7 所 示 。 


Dy en Mt mn. Et 
es 
CE HS [3 
en 下 
局 图片 
科 文 类 20121208-1 -Ljpa 031010jpg Ga 
直言 忒 
i 
CE ee 
Dy) 本 
ae 
2: 
= 人 
ea Ce Ee 
图 19-6 “选择 图 像 源 文件 ” 对 话 框 图 19-7 插入 图 像 
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将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ,执行 “插入 ”| “图像 ”命令 ， 弹 出 “选择 图 像 源 文件 ”对 
话 框 ， 如 图 19-8 所 示 。 
园 选择 图 像 ddpng， 单 击 “确定 ”按钮 ， 插 入 图 像 文件 ， 如 图 19-9 所 示 。 


天 于 和 站。 三 加 中国。 全 可 记 品 。 企业 化 天 区 红 。 本 和 和 们 


~ [EXH Coit"iper pegp ~ 


se) CD CE 


i 天 
So mF Hor 
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图 19-8 “选择 图 像 源 文 件 ”对 话 框 图 19-9 插入 图 像 
川 19.3.2 插入 按钮 导航 
按钮 导航 如 图 19-10 所 示 ， 主 要 是 网 站 的 


栏目 导航 区 域 ， 具 体制 作 步 骤 如 下 。 一 一 一 一 一 
国 打开 网 页 文档 ， 将 光标 置 于 表格 1 的 右边 ， ETEREEEEE 
执行 “插入 ”|“ 表 格 ” 命 令 ， 弹 出 “ 表 ER 
FRR 一 

| 


格 ” 对 话 框 ， 如 图 19-11 所 示 。 
园 单 击 “ 确 定 ”按钮 ， 插 入 1 行 3 列 的 表格 2， 

将 “对 齐 ” 设 置 为 “居中 对 齐 ”， 如 图 

19-12 所 示 。 


十 数 让 ] 到 1 
于 相克 度 : 082 [党 素 <] 
这 相反 细 : 0 。 像素 
单元 林 这 上 


单元 榈 间距 : 田 
ls 
i 恒 而 吕 
周 人 ae GE =] caru mim ER | Qs 元 
[E22 3 E23 | a 有 
图 19-11 “表格 ”对 话 框 图 19-12 插入 表格 


国 将 光标 置 于 表格 1 的 第 1 行 第 1 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 表 格 ” 命 令 ， 插 入 7 行 1 列 的 表格 ， 
此 表格 记 为 表格 3， 如 图 19-13 所 示 。 

轩 将 光标 置 于 表格 3 的 第 1 行 中 ， 执 行 “ 插 入 ”|“ 图 像 ”命令 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 
选择 图 像 about left.gif， 如 图 19-14 所 示 。 
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图 19-13 插入 表格 4 图 19-14 插入 图 像 


园 单 击 “确定 ”按钮 ， 插 入 图 像 文 


件 ， 如 图 19-15 所 示 。 


国 将 光标 置 于 表格 5 的 第 1 列 中 ， 切 换 至 “ 拆 分 视图 ”输入 代码 “background="images/about_men_ 


bg.git"”， 如 图 19-16 所 示 。 


Dw ma 


CT TE 3 


图 19-15 插入 表格 5 


在 属性 面板 中 将 “高 ”设置 为 35， 
加 同步 又 6 一 7 在 下 面 的 5 单元 格 


图 19-16 输入 代码 


如 图 19-17 所 示 。 


h 插 入 背景 图 像 ， 并 将 “高 ”设置 为 35， 如 图 19-18 所 示 。 


Wo em WA uu) wo eao ae apm wm 
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图 19-17 输入 代码 


园 在 表格 中 输入 文本 “公司 简介 ”， 


19-19 所 示 。 
回 则 步骤 9 输入 其 余 的 导航 文本 ， 妇 


2712 


图 19-18 插入 表格 和 插入 图 像 
在 属性 面板 中 设置 为 “居中 对 齐 ”， 颜 色 设置 为 白色 ， 如 图 


0 图 19-20 所 示 。 
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图 19-19 输入 文本 - 图 19-20 输入 文本 
旧 19.3.3 ”制作 版 权 信息 部 分 


网 站 版 权 信息 部 分 如 图 19-21 所 示 ， 具 体制 作 步骤 如 下 。 

图 19-21 网 站 版 权 信息 部 分 

国 打开 文档 ， 将 光标 置 于 表格 2 的 右边 ， 执 行 “ 插 入 ”| “表格” 命令 ， 弹 出 “表格 ”对 话 框 ， 效 
果 如 图 19-22 所 示 。 


园 单 击 “ 确 定 ”按钮 ， 插 入 1 行 1 列 的 表格 ， 此 表格 记 为 表格 4， 在 属性 面板 中 将 “对 齐 ” 设 置 为 
“居中 对 齐 ”， 如 图 19-23 所 示 。 


有 Copyright 


鸯 本 天子 基站。 几 由 本 。 们 PP 吕 正业 全 。 吉本 天 下 
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图 19-22 “表格 ”对 话 框 图 19-23 插入 表格 
园 将 光标 置 于 表格 中 ， 在 属性 面板 中 将 “背景 颜色 ”设置 为 #C41C1F， 如 图 19-24 所 示 。 
园 在 表格 中 输入 版 权 信 息 ， 将 字体 颜色 设置 为 白色 ， 并 居中 对 齐 ， 如 图 19-25 所 示 。 


DW zo end Em ND We EEC ,De zan eee sgm Ws oom sao) ern se 
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图 19-24 设置 背景 颜色 图 19-25 输入 文字 
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肯 19.3.4 创建 可 编辑 区 
创建 模板 后 接着 要 进行 的 操作 就 是 创建 可 编辑 区 域 。 可 编辑 区 域 可 以 控制 模板 页 面 中 哪些 
区 域 可 以 编辑 ， 哪 些 区 域 不 可 以 编辑 。 
国 将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 执 行 “ 插 入 ”|“ 模 板 ”|“ 可 编辑 区 域 ”命令 ， 弹 出 “新 建 
可 编辑 区 域 ” 对 话 框 ， 如 图 19-26 所 示 。 
园 单 击 “ 确 定 ” 按 钮 ， 即 可 创建 可 编辑 区 域 ， 如 图 19-27 所 示 。 


[DW =n® men za EA Wem eol e0 weld SOW wn 五 - 回 ' 
eed Aone a 


EE 加 


中 进行 编辑 


图 19-26 “新 建 可 编辑 区 域 ”对 话 框 图 19-27 创建 可 编辑 区 域 
园 执行 “文件 ” |“ 保存 ”命令 ， 弹 出 “另存 模版 ”对 话 框 ， 如 图 19-28 所 示 。 
园 在 “另存 为 ”文本 框 中 输入 名 称 ， 单 击 “保存 ” 按钮 ， 即 可 保存 为 模版 网 页 ， 如 图 19-29 所 示 。 
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有 的 本 板 ， | 及 术 ] 由 | ma [| 
[ca | 
| 
[| 
中 为 :相册 | | [部 助 ] 一 一 iv 
图 19-28 “另存 模版 ”对 话 框 图 19-29 保存 文档 


| 9 4 利用 模板 制作 网 站 二 级 页 面 
网 站 内 页 的 设计 大 部 分 是 一 致 的 ， 当 制作 完 许 多 内 页 后 ， 


果 想 要 更 新 网 站 ， 一 个 一 个 文件 地 修改 显然 十 分 麻烦 。 其 实 只 要 引用 模板 ， 2 
更 新 网 站 。 本 节 讲 述 利用 模板 创建 企业 网 站 简介 页 面 ， 如 图 19-30 所 示 。 具 体制 作 步 又 如 下 。 
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图 19-30 企业 网 站 简介 页 面 
团 执行 “文件 ” |“ 文件 ” |“ 新建” 命令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 如 图 19-31 所 示 。 
园 选择 “网 站 模板 ”|“ 站 点 xiaoguo”|“ 模 板 ”命令 ， 单 击 “ 确 定 ”按钮 ， 新 建 模 板 网 页 ， 如 图 
19-32 所 示 。 


机 Sen wan BY WA eo Wo WH a BIW aot 而 ， 夯 | 


ea 
rE WE Fy 


天 助 轴 “| 区 机 ) 


图 19-31 “新 建文 档 ” 对 话 框 图 19-32 新建 模板 网 页 

园 将 光标 置 于 可 编辑 区 中 删除 内 容 ， 执 行 “插入 ”|“ 表 格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 如 图 
19-33 所 示 。 

回 单 击 “ 确 定 ” 按 钮 ， 插 入 表格 ， 如 图 19-34 所 示 。 


Dw zem en dam SA mem Wel0l SH Wald) DW 本- CH 
iets 
ET TE TE WE 旭 | 


行 数 : 2 殊 1 
雪 格 宽度 : 100 [百分比 ~ 
边框 查 细 : 0 
单元 格 边 距 - 
单元 格 间距， 


区 Bel| . 
图 19-33 “表格 ”对 话 框 图 19-34 插入 表格 


国 将 光标 置 于 第 1 行 单元 格 中 ， 执 行 “ 插 入 ”| “图像 ”命令 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 
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选择 图 像 ， 如 图 19-35 所 示 。 
国 单 击 “确定 ”按钮 ， 插 入 图 像 文件 ， 如 图 19-36 所 示 。 


EN aboutLgif 
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图 19-35 “选择 图 像 源 文件 ”对 话 框 


将 光标 置 于 第 2 行 和 
国 选中 输入 的 文本 ， 


国 19.5.1 


元 格 中 ， 在 舞台 中 输入 文本 ， 如 


图 


在 属性 面板 中 将 字体 大 小 设置 为 12， 并 分 


19-36 PR 


图 19-37 所 示 。 
开 段 落 ， 如 图 19-38 所 示 。 


图 19-3 


19. 


团 打开 已 创建 的 站 点 
行 “ 站 点 ”| “改变 站 点 链接 范 
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命令 ， 选 择 命令 后 ， 弹 出 “更 改 整个 站 点 


链接 ”对 话 框 ， 如 


7 输入 文本 


图 19-38 设置 字体 


| 


在 真正 构建 远 端 站 点 之 前 ， 应 
测试 。 检 测 站 点 中 是 否 存在 错误 和 断裂 的 链接 等 ， 以 找 出 其 他 可 能 存在 的 问题 。 


检查 链接 


如 果 网 页 中 存在 错误 链接 ， 这 种 情况 是 ; 
很 难 察觉 的 。 而 Dreamweaver 可 以 帮助 你 快 | 

速 检 查 站 点 中 网 页 的 链接 ， 避 免 出 现 链接 错 | 
误 ， 具 体操 作 步骤 如 下 。 | 


地 图 ， 选 中 


图 19-39 所 示 。 


一 个 文件 , 执 | 


围 的 链接 ” 


应 该 在 本 地 先 对 站 点 进行 完整 的 


图 19-39 “更 改 整 个 站 点 链接 ”对 话 框 


回 在 “ 变 成 新 链接 ”文本 框 


件 ， 单 击 


ph 输 入 链接 的 文 


二 “确定 ”按钮 ， 弹出 


8 “更 新 文件 ” 


对 话 框 ， 单 击 “ 更 新 ”按钮 ， 完 成 更 改 整个 | 
站 点 范围 内 的 链接 ， 如 图 19-40 所 示 。 : 


更 新 以 下 文件 的 链接 吗 ? 


7 局 地产 公 司 ,htm 


“更 新 文件 ”对 话 框 


图 19-40 
国 执行 “站 点 ”| “检查 站 点 范围 的 链接 ” 


命令 ， 打 开 “ 链 接 检查 器 ” 面板 ， 在 “ 显 | 
示 ” 选 区 中 选择 “ 断 掉 的 链接 ”选项 ， 如 | 
图 19-41 所 示 。 : 


| 图 19-41 选择 “ 断 掉 的 链接 ”选项 | 
园 在 “显示 ”下 拉 表 中 选择 “外 部 链接 ” 选 | 
项 ， OO | 
息 ， 如 图 19-42 所 示 。 ! 


图 19-42 选择 “外 部 链接 ”选项 


用 19.5.2 站 点 报告 | 


可 以 对 当前 文档 、 选 定 的 文件 、 整 个 站 | 这 


点 的 工作 流程 ， 或 HTML 属 性 〈 包 括 辅助 功 : 
能 ) 运行 站 点 报告。 使 用 站 点 报告 可 以 检查 | 
可 合并 的 族 套 字体 标签 、 辅 助 功能 、 遗 漏 的 ; 
替换 文本 、 宛 余 的 嵌 套 标签 、 可 删除 的 空 标 
签 和 无 标题 文档 ， 具 体操 作 步 又 如 下 。 

国 执行 “站 点 ”| “报告” 命令 ， 弹出“ 报 | 
告 ”对 话 框 ， 在 对 话 框 中 的 “报告 在 "下 | 
拉 列表 中 选择 “整个 当前 本 地 站 点 ” 选 
项 ，“ 选 择 报告 ”列表 框 中 色 选 “ 多 余 的 
ro 
标题 文档 ” 复 选 框 ， 如 图 19-43 所 示 。 

单 击 “ 运 行 ”按钮 ， Dreainweaver 全 对 蒜 涉 | 
站 点 进行 检查 。 检查 完毕 后 ， 将 会 自动 打 | 


| 回 打开 需要 清理 的 网 页 文档 。 执行 
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开 “ 站 点 报告 ”面板 ， 在 面板 中 显示 检查 
结果 ， 如 图 19-44 所 示 。 


图 19-43 “报告 ”对 话 框 


TR 
机 


图 19-44 “站 点 报告 ”面板 


在 面板 中 双击 jianjie.html 文 件 ， 将 会 自动 打 


开 jianjie.html 页 面 文件 ， 并 选中 空 标签 ， 可 
以 进行 编辑 ， 如 图 19-45 所 示 。 


图 19-45 打开 文档 


清理 文档 一 一” 


用 19.5.3 


清理 文档 就 是 清理 一 些 空 标签 或 者 在 


， Word 中 编辑 时 所 产生 的 一 些 多余 的 标签 ， 具 


体操 作 步 又 如 下 。 


命 
令 ”|“ 清 理 HTML” 命 令 ， 弹 出 “) 
HTML/XHTML” 对 话 框 ， ee 


置 ， 如 图 19-46 所 示 。 


| 单 击 “确定 ”按钮 ，Dreamweaver 自 动 开 


始 清理 工作 。 清 理 完 毕 后 ， 弹 出 一 个 提示 
框 ， 在 提示 框 中 显示 清理 工作 的 结果 ， 如 
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图 19-47 所 示 。 


清理 HTML / XHTML 


区 除 。 回 [这 村 区 活 (<b><p>, 中 让 区 人 
回 多 全 的 小 杰 标 答 
日 不 局 于 Dreamweaver 的 HTML 注解 
加 Dreamweaver 特殊 标记 
回 涯 定 的 标签: 


末 元 成 时 显示 动作 记录 


选项 团 尽 可 能 合并 做 大 的 《font> 标签 
回 完成 时 显示 动作 记录 


图 19-48 “清理 Word 生 成 的 HTML” 对 话 框 
园 单 击 “确定 ”按钮 ， 清 理工 作 完成 后 显示 提 
示 框 ， 如 图 19-49 所 示 。 
没有 可 1 - _ 
可 清理 的 对 傅 s 


图 19-47 显示 清理 工作 的 结果 
执行 “命令 ”| “清理 Word 生 成 的 HTML” | Ce 
命令 ， 弹 出 “清理 Word 生 成 的 HTML” 对 


话 框 ， 如 图 19-48 所 示 。 | 图 19-49 ”提示 框 
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上 传 网 站 有 两 种 方法 ， 一 种 是 用 Dreamweaver 自 带 的 工具 上 
传 ， 一 种 是 FTP 软 件 上 传 ， 下 面 将 详细 讲述 使 用 Dreamweaver 上 传 方法 。 利 用 Dreamweaver 上 传 
网 站 的 具体 操作 步骤 如 下 。 
国 执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 如 图 19-50 所 示 。 
园 单 击 “编辑 当前 选 定 的 站 点 ”按钮 ， 弹 出 “站 点 设置 对 象 ”对 话 框 ， 在 对 话 框 中 选择 “服务 
器 ”选项 ， 如 图 19-51 所 示 。 
7 


和 


清理 Word HTML 结 果 : 
了 行内 表格 CSS 已 出 除 或 转化 为 HTML 
源 格式 已 应 用 


你 将 在 此 1 杀 吉 Web 上 的 而 面 < 此 对 话 框 的 设置 示 自 
intsm 避 服务 扣 供 商 (SP 或 web 六 


Et et 作 ， 站 无 和 元 所 此 和 中 。 如 果 要 这 术 w 并 有 


E33 E23 EE | 


图 19-50 “管理 站 点 ”对 话 框 图 19-51 服务 器 选项 
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国 在 对 话 框 中 单 击 “ 添 加 新 服务 器 ”按钮 ， 弹 出 远程 服务 器 设置 对 话 框 。 在 “连接 方法 ”下 拉 列 
表 中 选择 FTP 选 项 ， 在 “FTP 地 址 ”文本 框 中 输入 站 点 要 传 到 的 FTP 地 址 ， 在 “用 户 名 ”文本 框 
中 输入 拥有 的 FTP 服 务 主机 的 用 户 名 ;在 “密码 ”文本 框 中 输入 相应 用 户 的 密码 。 如 图 19-52 所 
示 。 
园 设置 完 远程 信息 的 相关 参数 后 ， 单 击 “ 保 存 ” 按 钮 。 执 行 “窗口 ”|“ 文 件 ”命令 ， 打 开 “ 文 
件 ”面板 ， 在 面板 中 单 击 豆 按钮 ， 如 图 19-53 所 示 。 


Web URL: [Pro 


ED Ea 区 
Er 下 EE 


图 19-52 远程 服务 器 设置 对 话 框 图 19-53 远程 信息 
园 弹出 图 19-54 所 示 的 界面 ， 在 界面 中 单 击 “ 连 接 到 远 端 主机 ”按钮 区 ]， 建 立 与 远程 服务 器 连 
接 。 连 接 到 服务 器 后 ，“ 连 接 到 远 端 主机 ”按钮 区 | 会 自动 变 为 闭合 区] 状态 ， 并 在 一 旁 亮 起 一 
个 小 绿灯 ， 列 出 远 端 网 站 的 目录 ， 右 侧 窗口 显示 为 “本 地 文件 ”信息 。 


[DW zn mae Ba sa 可， llsl x 
a Duwer =]% CE 全 |8 信和 | 加 
入 IL -本 本 六 外 | 详 剖 


Te 


图 19-54 建立 与 远程 服务 器 连接 


| 9 / 网 站 运营 与 维护 


一 个 好 的 网 站 ， 仅 仅 一 次 是 不 可 能 制作 完美 的 ， 由 于 市 场 环 
境 在 不 断 地 变化 ， 网 站 的 内 容 也 需要 随 之 调整 ， 给 人 以 更 新 的 感觉 ， 网 站 才 会 更 加 吸引 访问 
者 ， 而 且 给 访问 者 很 好 的 印象 。 这 就 要 求 对 站 点 进行 长 期 的 不 间断 的 维护 和 更 新 。 
个 19.7.1 ”网 站 的 运营 工作 
建 一 个 网 站 ， 对 于 大 多 数 人 并 不 陌生 ， 尤 其 是 已 经 拥有 自己 网 站 的 企业 和 机 构 。 但 是 ， 提 
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到 网 站 运营 可 能 很 多 人 不 理解 ， 对 网 站 运营 的 重要 性 也 不 明确 ， 通 常 被 忽视 。 网 站 运营 包括 网 
站 需求 分 析 和 整理 、 频 道内 容 建 设 、 网 站 策划 、 产 品 维护 和 改进 、 部 门 沟通 协调 5 个 方面 的 具 
体内 容 。 
1. 需求 分 析 和 整理 
对 于 一 名 网 站 运营 人 员 来 说 ， 最 为 重要 的 就 是 要 了 解 需求 ， 在 此 基础 上 ， 提 出 网 站 具体 的 
改善 建议 和 方案 ， 对 这 些 建议 和 方案 要 与 大 家 一 起 讨论 分 析 ， 确 认 是 否 具体 可 行 。 必 要 时 ， 还 
要 进行 调查 取证 或 分 析 统 计 ， 综 合 评 出 这 些 建 议和 方案 的 可 取 性 。 
需求 创新 ， 直 接 决 定 了 网 站 的 特色 ， 有 特色 的 网 站 才 会 更 有 价值 ， 才 会 更 吸引 用 户 来 使 
用 。 例 如 ， 新 浪 每 篇 编辑 后 的 文章 里 ， 常 会 提供 与 内 容 极为 相关 的 另外 内 容 链接 ， 供 读者 选 
择 ， 就 充分 考虑 了 用 户 的 兴趣 需求 。 网 站 细节 的 改变 ， 应 当 是 基于 对 用 户 需求 把 握 而 产生 的 。 
需求 的 分 析 还 包括 对 竞争 对 手 的 研究 。 研 究 竞争 对 手 的 产品 和 服务 ， 看 看 他 们 最 近 做 了 哪 
些 变化 ， 判 断 这 些 变化 是 不 是 真 的 具有 价值 。 如 果 能 够 为 用 户 带 来 价值 话 ， 完 全 可 以 采纳 为 己 
所 用 。 
2. 频道 内 容 建设 
频道 内 容 建 设 是 网 站 运营 的 重要 工作 。 网 站 内 容 决定 了 网 站 是 什么 样 的 网 站 。 当 然 ， 也 有 
一 些 功能 性 的 网 站 ， 如 搜索 、 即 时 聊天 等 ， 只 是 提供 了 一 个 功能 ， 让 用 户 去 使 用 这 些 功能 。 使 
用 这 些 功 能 最 终 仍 是 为 了 获取 想 要 的 信息 。 
频道 内 容 建设 ， 更 多 的 工作 是 由 专门 的 编辑 人 员 来 完成 ， 内 容 包括 频道 栏目 规划 、 信 息 编 
辑 和 上 传 、 信 息 内 容 的 质量 提升 等 。 编 辑 人 员 做 的 也 是 网 站 运营 范畴 内 的 工作 ， 属 于 网 站 运营 
工作 中 的 重要 成 员 。 很 多 小 网 站 ， 或 部 分 大 型 网 站 ， 网 站 编辑 人 员 就 承担 着 网 站 运营 人 员 的 角 
色 。 不 仅 要 负责 信息 的 编辑 ， 还 要 提 需 求 ， 做 方案 等 。 
3. 网 站 策划 
网 站 策划 ， 包 括 前 期 市 场 调研 、 可 行 性 分 析 、 策 划 文 档 撰 写 、 业 务 流程 说 明 等 内 容 。 策 划 
是 建设 网 站 的 关键 ， 一 个 网 站 ， 只 有 真正 策划 好 了 ， 最 终 才 会 有 可 能 成 为 好 的 网 站 。 因 为 ， 前 
期 的 网 站 策划 涉及 更 多 的 市 场 因 素 。 
根据 需求 ， 来 进行 有 效 地 规划 。 文 章 标题 和 内 容 怎么 显示 ， 广 告 如 何 展示 等 ， 都 需要 进行 
合理 和 科学 地 规划 。 页 面 规划 和 设计 是 不 一 样 的 。 页 面 规划 较为 初级 ， 而 页 面 设计 则 上 升 到 了 
更 高 级 的 层次 。 
4. 产品 维护 和 改进 
产品 的 维护 和 改进 工作 ， 其 实 与 前 面 讲 的 需求 整理 分 析 有 一 些 相似 之 处 。 但 在 里 ， 更 强调 
的 是 产品 的 维护 工作 。 产 品 的 维护 工作 ， 更 多 应 是 对 顾客 已 购买 产品 的 维护 工作 ， 响 应 顾客 提 
出 的 问题 。 
在 大 多 数 网 络 公司 ， 都 有 比较 多 的 客服 人 员 。 很 多 的 时 候 ， 客 服 人 员 对 技术 、 产 品 等 问题 
可 能 不 是 非常 清楚 ， 对 顾客 的 不 少 问题 又 未 能 做 很 好 的 解答 ， 这 时 ， 就 需要 运营 人 员 分 析 和 判 
断 问题 ， 或 对 顾客 给 出 合理 的 说 法 ， 或 把 问题 交 给 技术 人 员 去 处 理 ， 或 找 更 好 的 解决 方案 。 
此 外 ， 产 品 维护 还 包括 制定 和 改变 产品 政策 、 进 行 良好 的 产品 包装 、 改 进 产品 的 使 用 体验 
等 。 产 品 改进 ， 大 多 情况 下 ， 同 时 也 是 需求 分 析 和 整理 的 问题 。 
5. 各 部 门 协调 工作 
这 一 部 分 的 工作 内 容 ， 更 多 体现 的 是 管理 角色 。 因 为 网 站 运营 人 员 深 知 整个 网 站 的 运营 情 
况 ， 知 识 面相 对 来 说 比较 全 面 ， 与 技术 人 员 、 美 工 、 测 试 、 业 务 的 沟通 协调 工作 更 多 地 是 由 网 
站 运营 人 员 来 承担 。 作 为 网 站 运营 人 员 ， 沟 通 协调 能 力 是 必 不 可 少 。 要 与 不 同 专业 性 思维 打 交 
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道 ， 在 沟通 的 过 程 中 ， 可 能 碰 上 许多 的 不 理解 或 难以 沟通 的 现象 ， 是 属于 比较 正常 的 问题 。 
优秀 的 网 站 运营 人 才 ， 要 求 具备 行业 专业 知识 ， 文 字 撰 写 能 力 、 方 案 策划 能 力 、 沟 通 协调 
能 力 、 项 目 管理 能 力 等 方面 的 素质 。 


侦 19.7.2 ”网 站 的 更 新 维护 

网 站 的 信息 内 容 应 该 经 常 更 新 ， 如 果 现 在 浏览 者 访问 的 网 站 看 到 的 是 去 年 的 新 闻 或 在 秋天 
看 到 新 春 快乐 的 网 站 祝贺 语 ， 那 么 他 们 对 企业 的 印象 肯定 大 打折 扣 。 因 此 注意 实时 更 新 内 容 是 
相当 重要 的 。 在 网 站 栏目 设置 上 ， 最 好 将 一 些 可 以 定期 更 新 的 栏目 如 新 闻 等 放 在 首页 上 ， 使 首 
页 的 更 新 频率 更 高 些 。 

网 站 风格 的 更 新 包括 版 面 、 配 色 等 各 方面 。 改 版 后 的 网 站 让 客户 感觉 改头换面 ， 焕 然 一 
新 。 一 般 改版 的 周期 要 长 些 。 如 果 客 户 对 网 站 也 满意 的 话 ， 改 版 可 以 延长 到 几 个 月 甚至 半年 。 
改版 周期 不 能 太 短 。 一 般 一 个 网 站 建设 完成 以 后 ， 代 表 了 公司 的 形象 、 公 司 的 风格 。 随 着 时 间 
的 推移 ， 很 多 客户 对 这 种 形象 已 经 形成 了 定 势 。 如 果 经 常 改版 ， 会 让 客户 感觉 不 适应 ， 特 别 是 
那 种 风格 彻底 改变 的 “改版 ”。 当 然 如 果 对 公司 网 站 有 更 好 的 设计 方案 ， 可 以 考虑 改版 。 毕 竟 
长 期 使 用 一 种 版 面 会 让 人 感觉 陈旧 、 厌 烦 。 


| 9 8 网 站 的 推广 


网 页 做 好 之 后 ， 还 要 不 断 地 进行 宣传 ， 这 样 才能 让 更 多 的 朋 
友 认 识 它 ， 提 高 网 站 的 访问 率 和 知名 度 。 推 广 的 方法 有 很 多 ， 如 到 搜索 引擎 上 注册 、 网 站 交换 
链接 、 添 加 广告 链 等 。 
1， 登 录 搜 索引 擎 
登录 搜索 引擎 的 目的 也 就 是 为 了 更 有 效 地 进行 网 站 推广 。 到 新 浪 、 搜 狐 、 百 度 、 谷 歌 、 雅 
虎 等 一 些 大 的 搜索 引擎 网 站 去 登录 一 下 ， 会 给 你 带 来 意 想 不 到 的 效果 。 图 19-55 所 示 为 百度 搜 
索引 擎 登录 页 面 。 


Bai 全 百度 站 长 平台 百 页 IR 机 赎 VIP 俱乐部 委 录 
百度 站 长 平台 首届 新 站 评选 大 赛 
ER 折 有 通过 市 核 的 优质 其 站 雹 会 获得 sitemap 和 权限 
Mm unusx 
百 说 让 发 名 为 沾 发 提 检 单条 ul 提交 适 潮 ， 仑 可 引 提 交 雪村 王朗 由 对 6 下 度 所 和 引 可 二 拉 税 本 业 外 得， 但 在 伴 正定 轴 上 耶 人 反 交 的 Lal 
~ 辣 议 验证 所 有 权 后 ， 郊 榨 广 wl， , 
Wee 语 秆 号 URL 地 址 


图 19-55 ”百度 搜索 引擎 登录 页 面 
可 以 把 自己 的 网 站 提交 给 各 个 搜索 引擎 ， 这 样 在 各 个 搜索 引擎 就 能 找到 你 的 店铺 了 ， 虽 和 然 
不 是 每 个 都 能 通过 ， 但 是 勤劳 一 点 总 是 会 有 几 个 通过 的 。 
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ETEEIETEE 识 堂 闫 录 “ee®@ 


方法 很 简单 : 首先 在 浏览 器 打开 每 个 网 站 | 
| 将 产品 大 类 的 名 称 都 写 上 去 。 另 外 名 称 要 写 
; 全 ， 如 “ 电 冰 箱 ” 不 要 简写 成 “冰箱 ”。 这 
| 里 有 个 技巧 ， 你 可 以 将 一 些 相对 关键 的 词 重 
; 复 ， 这 样 可 以 提高 网 站 的 排行 。 

4. 传统 方式 

英文 雅虎 登录 口 : http://search.yahoo. ; 


的 登录 口 ， 然 后 把 你 的 网 址 输入 进去 就 行 了 。 
百度 搜索 网 站 登录 口 : http://www.baidu. 
com/search/url submit.html。 
Google 网 站 登录 口 : http://www.google. 
cn/intl/zh-CN_cn/add url.html。 


com/info/submit.html 。 
2. 交换 广告 条 


广告 交换 是 宣传 网 站 的 一 种 较为 有 效 的 方 | 
法 。 在 交换 广告 条 的 网 页 上 填写 一 些 主要 的 信 | 
息 ， 如 广告 图 片 、 网 站 网 址 等 ， 之 后 它 会 要 求 | 
| 传 途径 很 多 ， 可 以 根据 自身 的 特点 选择 其 中 
| 一些 较为 便捷 有 效 的 方法 。 
| 妇 ”传统 媒体 广告 


户 将 一 段 HIML 代 码 加 入 到 网 站 中 ， 这 样 ， 
户 的 广告 条 就 可 以 在 这 个 网 站 上 出 现 。 
因为 客户 在 其 他 网 站 上 只 能 看 到 广告 条 ， 


站 


要 想 吸 引 客户 点 击 广告 条 ， 广 告 条 一 定 要 鲜 | 
亮 、 显 眼 ， 一 定 要 将 网 站 性 质 、 名 称 等 重要 的 
; 5， 借助 网 络 广告 
网 站 最 新 的 信息 ， 或 者 一 些 免费 活动 、 有 奖 活 


文字 信息 加 入 到 广告 条 上 。 另 外 还 要 尽 可 能 将 


动 等 吸引 客户 眼光 的 信息 添加 到 广告 条 上 。 网 
络 时 代 讲 究 的 是 速度 ， 客 户 不 会 浪费 宝贵 的 时 
间 去 仔细 研究 广告 条 。 

友情 链接 就 是 一 种 常见 的 交换 广告 条 的 推 
广 方式 ， 包 括 文字 链接 和 图 片 链接 。 文 字 链 接 
一 般 就 是 网 站 的 名 字 。 图 片 链 接 包 括 Logo 的 链 


推广 。 
Wh -入 <- 区 
ee 


图 19-56 使 用 友情 链接 推广 
3. Meta 标 签 的 使 用 


使 用 Meta 标 签 是 简单 而 且 有 效 地 宣传 网 
站 的 方法 。 不 需要 去 搜索 引擎 注册 就 可 以 让 ; 
| 6. 总 
客户 搜索 到 你 的 网 站 。 将 下 面 这 段 代码 加 入 | “” 登 末 中 下 导航 站 上 


到 网 页 标签 中 : 


称 ， 产 品名 称 … … > 
content 里 边 填写 关键 词 。 关 键 词 最 好 要 
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冰箱 ， 可 以 写 电 冰箱 、 家 电 、 电 器 等 。 尽 量 


传统 的 推广 方式 有 以 下 两 种 。 


; 女 直接 跟 客户 宣传 


一 个 稍 具 规模 的 公司 一 般 都 有 业务 部 、 
市 场 部 或 客户 服务 部 。 业 务 员 跟 客户 打交道 
的 时 候 可 以 直接 将 公司 网 站 的 网 址 告诉 给 客 
户 ， 或 者 直接 给 客户 发 E-mail 等 进行 宣传 。 宣 


众所周知 ， 传 统 媒体 广告 的 宣传 是 目前 
最 为 行 之 有 效 且 最 有 影响 力 的 推广 方式 。 


网 络 广告 是 常用 的 网 络 营销 策略 之 一 ， 


| 在 网 络 品牌 、 产 品 促销 、 网 站 推广 等 方面 均 
; 有 明显 作用 。 网 络 广告 的 常见 形式 包括 banner 
| 广告 、 关 键 字 广告 、 分 类 广告 、 赞 助 式 广告 、 
| E-mail 广 告 等 。 网 络 广告 最 常见 的 表现 方式 是 
| 图 形 广告 ， 如 各 门户 站 点 主页 上 部 的 横幅 广 
| 告 ， 图 19-57 所 示 是 利用 网 络 广告 推广 网 站 。 

接 或 Banner 的 链接 。 图 19-56 所 示 的 是 友情 链接 ， et 


Py a 
aas。 us 


图 19-57 网 络 广告 


现在 国内 有 大 量 的 网 址 导航 类 站 点 ， 


: 如 http://www.hao123.com/、http:/www.265. 
<meta name=keywords content= 网 站 名 | 


| com/ 等 。 在 这 些 网 址 导航 站 点 上 做 上 链接 ， 
| 也 能 带 来 大 量 的 流量 ， 不 过 现在 想 登录 上 像 
i hao123 这 种 流量 特别 大 的 站 点 并 不 是 件 容 
大 众 化 ， 跟 企业 文化 、 公 司 产 品 等 紧密 相 ， 名 站 让 从 币 妆 人 半生 全 
关 。 并 且 尽量 多 写 一 些 。 如 公司 生产 的 是 电 | "J 加 


值得 的 。 图 19-58 所 示 即 为 使 用 网 址 导航 站 点 | 
推广 网 站 。 


ls8 使用 网 址 半角 站 点 推广 网 站 
7， 论 坛 推广 


在 论坛 上 经 常 看 到 很 多 用 户 在 签名 处 都 ; 
留 下 了 他 们 的 网 址 ， 这 也 是 网 站 推广 的 一 种 国 口碑 营销 。 洪 在 顾客 受到 文章 观点 的 影响 
方法 。 将 有 关 的 网 站 推广 信息 发 布 在 其 他 潜 | 
在 用 户 可 能 访问 的 网 站 论坛 上 ， 利 用 用 户 在 | 
这 些 网 站 获取 信息 的 机 会 实现 网 站 推广 的 目 | 


的 。 图 19-59 所 示 即 为 使 用 论坛 推广 网 站 。 


上! PE BT 
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图 19-59 使 用 论坛 推广 网 站 
8. 博客 推广 


用 博客 来 传播 广告 信息 首要 条 件 是 拥有 
具有 良好 写作 能 力 的 博客 。 博 客 在 发 布 自己 | 外 
的 生活 经 历 、 工 作 经 历 和 某 些 热门 话题 的 评 ; 
论 等 信息 的 同时 ， 还 可 附带 宣传 企业 ， 如 企 ; 
等 ， 特 别 是 当 发 布 文章 的 ; 
定 影响 力 的 人 物 ， 所 发 ; 
布 的 文章 更 容易 引起 关注 ， 吸 引 大量 潜 在 的 | 
通过 个 人 博客 文章 内 容 为 读者 提 | 


业 文化 、 产 品 品 
作者 是 在 某 领 域 有 一 


用 户 浏览 ， 

供 了 解 商家 信息 的 机 会 。 

国 博客 营销 以 推广 运营 为 目的 ， 影 响 力 大 。 
随 着 “戴尔 笔记 本 ”等 博客 门 事件 的 陆续 ， 


发 生 ， 证 实 了 博客 作为 高 端 人 群 所 形成 的 | 


@ 一 e 一 第 19 章 本 FI 于 贱 


评论 意见 影响 面 和 影响 力度 越 来 越 大 ， 博 
客 渐渐 成 为 了 网 民 们 的 “意见 领袖 ”引导 
着 网 民 和 与 论 潮流 ， 他 们 所 发 表 的 评价 和 意 
见 会 在 极 短 时 间 内 在 互联 网 上 迅速 传播 开 
来 ， 对 店铺 品牌 造成 巨大 的 影响 。 


| 因 大 大 降低 推广 费用 。 大 部 分 博客 平台 基本 都 


是 免费 提供 ， 只 需要 遵守 博客 的 准则 ， 填 
写 相关 的 信息 就 可 以 。 通 过 博客 的 方式 ， 
在 博客 内 容 中 适当 加 入 推广 产品 的 信息 
(或 者 直接 添加 网 站 链接 ) 达到 网 站 推广 
的 目的 ， 这 样 的 “博客 推广 ”也 是 极 低 成 
本 的 推广 方法 ， 降 低 了 一 般 付费 推广 的 费 
用 ， 大 大 提升 了 网 站 的 访问 量 。 


后 ， 会 跟 家 人 、 朋 友 、 合 作 伙 伴 等 谈论 沟 
通 ， 会 潜移默化 地 介绍 影响 网 站 ， 这 就 是 
广告 ， 而 且 广告 成 本 比 其 他 媒体 成 本 要 低 
得 多 。 不 但 为 企业 降低 了 成 本 ， 还 增加 了 
销售 量 与 利润 率 。 


| 加 博客 平台 往往 拥有 庞大 的 忠实 的 用 户 群体 ， 


用 户 直接 可 以 自由 互 访 ， 并 且 可 以 将 文章 
进行 转载 、 留 言 、 评 论 ， 实 现 博客 之 间 的 
互动 交流 。 特 别 是 有 价值 的 博文 会 吸引 大 
量 潜在 用 户 浏览 ， 从 而 达到 向 潜在 用 户 传 
递 营销 信息 的 目的 。 


| 因 也 可 以 通过 博客 ， 宣 传 企业 的 文化 和 理念， 


获得 更 多 的 价值 认同 感 。 
图 19-60 所 示 是 通过 博客 推广 网 站 。 


as + | 吉 
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图 19-60 通过 博客 推广 网 站 
9， 电子 邮件 推广 
| 电子 邮件 因为 方便 、 快 捷 、 成 本 低廉 的 
| 特点， 成 为 目前 使 用 最 广泛 的 互联 网 应 用 ， 
是 一 种 有 效 的 推广 工具 。 

电子 邮件 推广 也 称 为 Email 推广 ，E-mail 
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CE 识 堂 实录 。。 一 全 


一 次 即 可 ， 多 次 发 送 会 给 他 人 | 
它 常用 的 方法 ; 
包括 邮件 列表 、 电 子 刊物 、 新 闻 邮 件 、 会 员 | 
。 拥 有 
洪 在 用 户 的 E-mail 地 址 是 开展 E-mail 营销 的 前 
提 ， 这 些 地 址 可 以 是 企业 从 用 户 、 潜 在 用 户 ; 
资料 中 自行 收集 整理 ， 也 可 以 利用 第 三 方 的 ; 


推广 方式 使 用 
留 下 不 好 的 印象 ， 影 响 口碑 。 


通信 、 专 业 服 务 商 的 电子 邮件 广告 


潜在 用 户 资源 。 如 果 邮 件 发 送 规模 比较 小 ， 


可 以 采取 一 般 的 邮件 发 送 方式 或 邮件 群发 软 ; 
件 来 完成 ， 如 果 发 送 规模 较 大 ， 就 应 该 借助 | 
台 来 发 送 。 发 送 ; 
E-mail 推 广 方式 成 功 的 关键 是 你 发 送 的 广告 | 
信 ， 写 得 要 有 诚意 ， 而 且 最 好 你 的 网 店 所 提 ; 
供 的 信息 内 容 正 好 是 收 到 这 封 信 的 网 友 所 需 ; 动 、 系 统 的 布局 、 
| 发 展 也 使 得 其 营销 效果 尤为 显著 。 微 博 营销 
TT : 画 ; 涉及 的 范围 包括 认证 、 有 效 粉丝 、 
rr = ， 博 、 开 放 平 台 、 整 体 运营 等 ， 当 然 ， 微 博 营 
| 销 也 有 其 缺点 ， 有 效 粉 丝 数 不 足 、 微 博 内 容 


于 专业 的 邮件 列表 发 行 平 


要 的 。 I 61 所 示 。 


es br 


图 19-61 电子 邮件 广告 推广 


10.， 微 博 营销 推广 


人 等 创造 价值 而 执行 的 一 种 营销 方式 ， 也 是 | 
指 商家 或 个 人 通过 微 博 平台 发 现 并 满足 用 户 ; 


的 各 类 需求 的 商业 行为 方式 。 


微 博 营销 以 微 博 作 为 营销 和 平台， 每 一 个 | 
听众 《粉丝 ) 都 是 潜在 营销 对 象 ， 企 业 利用 | 
更 新 自己 的 微 博 向 网 友 传播 企业 信息 、 产 品 | 
信息 ， 树 立 良 好 的 企业 形象 和 产品 形象 。 每 ; 
天 更 新 内 容 就 可 以 跟 大 家 交流 互动 ， 或 者 发 ， 


一 、 填 空 题 


1. 对 于 所 有 网 站 来 说 重 中 之 重 的 页 面 就 是 
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布 大 家 感 兴趣 的 话题 ， 这 样 来 达到 营销 的 目 
的 。 图 19-62 所 示 为 利用 腾讯 微 博 宣 传 网 站 。 


图 19-62 利 用 腾讯 微 博 宣传 
微 博 营销 注重 价值 的 传递 、 内 容 的 互 
准确 的 定位 ， 微 博 的 火热 


话题 、 名 


| 更 新 过 快 等 。 
;11.， 微 信 营 销 推广 
微 信 推 广 营销 是 随 着 微 信 的 火热 而 兴起 


| 的 一 种 网 络 营销 方式 。 微 信 不 存在 距离 的 限 
| 制 ，| 
| 种 联系 ， 用 户 订阅 自己 所 需 的 信息 ， 商 家 通 
| 过 提供 用 户 需要 的 信息 ， 推 广 自己 的 产品 ， 
机 到 i 从 而 实现 点 对 点 的 营销 。 图 19-63 为 利用 微 信 
微 营销 是 指 通 过 微 平台 为 ,个 | 已 9 

博 是 指 通过 微 博 平台 为 商家 | | 一 维 码 营销 推广 企业 。 


户 注 册 微 信 后 ， 可 与 “朋友 ”形成 一 


图 19-63 ”利用 微 信 二 维 码 营销 推广 企业 


了 ， 能 够 做 好 就 相当 于 做 好 网 


@@。。 第 19 章 
站 的 一 半 了 。 
2. 一 个 好 的 网 站 ， 仅 仅 一 次 是 不 可 能 制作 完美 的 ， 由 于 市 场 环境 在 不 断 地 变化 ， 网 站 的 内 
容 也 需要 随 之 调整 ， 给 人 经 常 更 新 的 感觉 ， 网 站 才 会 更 加 吸引 访问 者 ， 而 且 给 访问 者 很 好 的 印 
象 。 这 就 要 求 对 站 点 进行 长 期 的 不 间断 的 
二 、 操 作 题 
制作 一 个 图 19-64 所 示 的 企业 网 站 主页 。 


1 主要 是 利用 插入 表格 、 文 字 和 图 像 来 制作 的 ， 也 可 以 先 制作 成 模板 ， 具 体 参 考 19.3.4 创 建 模板 。 1 


最 终 文件 : 最 终 文件 /CH19/ 操 作 题 /indexl html 


奔 环宇 星空 科技 


入 wm 


和 tt 
于， 生 只 和 | 


sf 
Bh 
1 


图 19-64 企业 网 站 首页 


| We 


制作 一 个 完整 的 企业 网 站 ， 首 先 考虑 的 是 网 站 的 主 
要 功能 栏目 、 色 彩 搭配、 风格 及 其 创意 。 在 设计 综合 性 网 站 时 ， 为 了 减少 工作 时 间 ， 提 高 工作 
效率 ， 应 尽量 避免 一 些 重复 性 的 劳动 ， 特 别 是 要 好 好 掌握 在 本 章 中 介绍 的 模板 的 创建 与 应 用 ， 
以 及 留言 系统 的 设计 制作 。 读 者 在 学 习 本 章 的 过 程 中 应 多 下 些 功夫 ， 来 掌握 企业 网 站 的 特点 与 
制作 。 
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附录 A HTML 常用 标签 


<marquee>...</marquee> 


1. 跑马 灯 


<marquee behavior=slide>...</marquee> 


<marquee behavior=scroll>...</marquee> 


<marquee behavior=alternate>...</marquee> 


<marquee direction=down>...</marquee> 


<marquee direction=up>...</marquee> 


<marquee direction=right></marquee> 


<marquee direction=left></marquee> 


<marquee loop=2>...</marquee> 


<marquee width=180>...</marquee> 


<marquee height=30>...</marquee> 
<marquee bgcolor=FF0000>...</marquee> 设 定 背景 颜色 
设 定 卷 动 距离 
<marquee scrolldelay=300>...</marquee> 设 定 卷 动 时 间 


<marquee scrollamount=30>...</marquee> 


2. 字体 效果 

<hl>...</hl> 标题 字 ( 最 大 ) 

<h6>...</h6> 标题 字 ( 最 小 ) 

<b>...</b> 粗 体 字 

<strong>...</strong> 粗 体 字 (强调 ) 

<i>…</i> 斜体 字 

<em>...</em> 针 体 字 ( 强 调 ) 

<dfn>...</dfn> 斜体 字 ( 表 示 定 义 ) 

<U>.…</u> 底线 

<ins>...</ins> 底线 (表示 插入 文字 ) 
<strike>...</strike> 横 线 

<s>...</s> 删除 线 

<del>...</del> 删除 线 (表示 删除 ) 
<kbd>...</kbd> 键盘 文字 

<tt>...</tt> 打字 体 

<xmp>.…</xmp> 固定 宽度 字体 (在 文件 中 空白 、 换 行 、 定 位 功能 有 效 ) 
<plaintext>...</plaintext> 固定 宽度 字体 (不 执行 标记 符号 ) 
<listing>...</listing> 固定 宽度 小 字体 

<font color=00ff00>...</font> 字体 闫 色 

<font size=1>...</font> 最 小 字体 


<font style =font-size:100 px>...</font> 无 限 增 大 


@ 一 e 一 附录 和 图 


3. 区 断 标记 
标签 功能 
<hr> 水 平 线 
<hr size=9> 水 平 线 ( 设 定 大 小 ) 
<hr width=80%> 水 平 线 ( 设 定 宽度 ) 
<hr color=ff0000> 水 平 线 ( 设 定 颜色 ) 
<br> (换行 ) 
<nobr>...</nobr> 水 域 (不 换行 ) 
<p>...</p> 水 域 (段落 ) 
<center>...</center> 置 中 
4. 链接 
标签 功 人 
<base hre 伍 地 址 > ( 预 设 好 连结 路 径 ) 
<a hre 伍 地 址 ></a> 外 部 连结 
<a hre 伍 地 址 target= blank></a> 外 部 连结 ( 另 开 新 窗口 ) 
<a hre 伟 地 址 target=_top></a> 外 部 连结 (全 窗口 连结 ) 
<a hre 作 地址 targe 全 页 框 名 ></a> 外 部 连结 (在 指定 页 框 连结 ) 
5. 图 像 /音乐 
标签 功能 
<img src= 图 片 地 址 > 贴图 
<img src= 图 片 地 址 width=180> 设 定 图 片 宽度 
<img src= 图 片 地 址 height=30> 设 定 图 片 高 度 
<img src= 图 片 地 址 alt= 提 示 文 字 > 设 定 图 片 提示 文字 
<img src= 图 片 地 址 border=1> 设 定 图 片 边框 
<bgsound src=MID 音 乐 文件 地 址 > 背景 音乐 设 定 
6. 表格 
标签 功能 
<table aling=left>.…</table> 表格 位 置 ， 置 左 
<table aling=center>...</table> 表格 位 置 ， 置 中 
<table background= 图 片 路 径 >...</table> 背景 图 片 的 URL= 就 是 路 径 网 址 
<table border= 边 框 大 小 >...</table> 设 定 表格 边框 大 小 (使 用 数字 ) 
<table bgcolor- 颜 色 码 >.…</table> 设 定 表 格 的 背景 颜色 
<table borderclor= 颜 色 码 >...</table> 设 定 表 格 边框 的 颜色 
<table borderclordark= 颜 色 码 >.…</table> 设 定 表 格 暗 边框 的 颜色 
<table borderclorlighf= 颜 色 码 >..</table> 设 定 表 格 亮 边 框 的 颜色 


<table cellpadding= 参 数 >...</table> 


指定 内 容 与 网 格 线 之 间 的 间距 (使 用 数字 ) 


<table cellspacing= 参 数 >...</table> 


彰 定 网 格 线 与 网 格 线 之 间 的 距离 (使 用 数字 ) 


<table cols= 参 数 >...</table> 前 定 表 格 的 栏 数 
<table frame= 参 数 >...</table> 设 定 表 格外 框 线 的 显示 方式 
<table width= 宽 度 >...</table> 指定 表格 的 宽度 大 小 (使 用 数字 ) 


<table height= 高 度 >...</table> 


指定 表格 的 高 度 大 小 (使 用 数字 ) 


287 


IE 识 尝 实录 。。 一 全 


( 续 表 ) 
<td colspan= 参 数 >...</td> 指定 储存 格 合并 栏 的 栏 数 (使 用 数字 ) 
<td rowspan== 参 数 >...</td> 指定 储存 格 合并 列 的 列 数 (使 用 数字 ) 
7. 分 割 窗口 
标签 功能 
左右 分 割 ,将 左边 框架 分 割 大 小 为 20%， 右 边框 架 的 大 


<frameset cols=” 20%,*”> 


小 浏览 器 会 自动 调整 


上 下 分 制 ,将 上 面 框架 分 割 大 小 为 20%， 下 面 框架 的 大 
小 浏览 器 会 自动 调整 


<frameset rows=” 20%,*”> 


<frameset cols=” 20%,*”> 分 割 左右 两 个 框架 
<frameset cols=” 20%,*,20%”> 分 割 左 中 右 3 个 框架 
<frameset rows=” 20%,*,20%”> 分 割 上 中 下 3 个 框架 

<! - -.…- -> 批注 

<AHREF TARGET> 指定 超级 链接 的 分 割 窗口 
<A HREF=# 锚 的 名 称 > 指定 锚 名 称 的 超级 链接 
<A HREF> 指定 超级 链接 
<ANAME= 锚 的 名 称 > 被 连结 点 的 名 称 
<ADDRESS>.…</ADDRESS> 用 来 显示 电子 邮箱 地 址 
<B> 粗 体 字 

<BASE TARGET> 指定 超级 链接 的 分 割 窗口 
<BASEFONT SIZE> 更 改 预 设 字形 大 小 
<BGSOUND SRC> 加 入 背景 音乐 

<BIG> 显示 大 字体 

<BLINK> 闪烁 的 文字 

<BODY TEXT LINK VLINK> 设 定 文字 颜色 

<BODY> 显示 本 文 

<BR> 换行 

<CAPTION ALIGN> 设 定 表格 标题 位 置 
<CAPTION>...</CAPTION> 为 表格 加 上 标题 
<CENTER> 向 中 对 齐 
<CITE>...</CITE> 定义 用 斜体 显示 标明 引文 
<CODE>...</CODE> 用 于 列 出 一 段 程序 代码 
<COMMENT>...</COMMENT> 加 上 批注 

<DD> 设 定 定义 列表 的 项 目 解说 
<DFN>...</DFN> 显示 “定义 ”文字 
<DIR>...</DIR> 列表 文字 卷 标 
<DL>...</DL> 设 定 定义 列表 的 卷 标 
<DT> 设 定 定义 列表 的 项 目 
<EM> 强调 之 用 
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附录 B CSS 属 性 一 览 表 


CSS - 文字 属性 

color : #999999; 文字 颜色 
font-family : 宋体 ,sans-serif 文字 字体 
font-size : 9pt; 文字 大 小 
font-style:itelic; 文字 斜体 
font-variant:small-caps; 小 字体 
letter-spacing : 1pt; 字 间 距离 
line-height : 200%; 设置 行 高 
font-weight:bold; 文字 粗 体 
vertical-align:sub; 下 标 字 
vertical-align:super; 上 标 字 
text-decoration:line-through:; 加 删除 线 
text-decoration:overline; 加 顶 线 
text-decoration:underline; 加 下 划 线 
text-decoration:none; 删除 链接 下 划 线 
text-transform : capitalize; 首 字 大 写 
text-transform : uppercase; 英文 大 写 
text-transform : lowercase; 英文 小 写 
text-align:right; 文字 右 对 齐 
text-align:left; 文字 左 对 齐 
text-align:center; 文字 居中 对 齐 
text-align:justify; 文字 两 端 对 齐 
vertical-align 属 性 

vertical-align:top; 垂直 向 上 对 齐 
vertical-align:bottom:; 垂直 向 下 对 齐 
vertical-align:middle: 垂直 居中 对 齐 
vertical-align:text-top; 文字 垂直 向 上 对 齐 
vertical-align:text-bottom: 文字 垂直 向 下 对 齐 
CSS - 项 目 符号 

功能 

list-style-type:none; 不 编号 
list-style-type:decimal; 阿拉 伯 数 字 
list-style-type:lower-roman:; 小 写 罗 马 数字 
list-style-type:upper-roman:; 大 写 罗马 数字 
list-style-type:lower-alpha; 小 写 英 文字 母 
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( 续 表 ) 


list-style-type:upper-alpha; 


list-style-type:disc; 


list-style-type:circle; 


list-style-type:square; 


list-style-image:url(/dot.gif) 图 片 式 符号 
list-style-position:outside: 凸 排 
list-style-position:inside; 缩 进 
CSS - 背景 样式 
功能 

background-color:#F5E2EC:; 背景 颜色 
background:transparent; 透视 背景 
background-image : url(image/bg.gif); 背景 图 片 
background-attachment : fixed; 浮 水 印 固 定 背 景 
background-repeat : repeat; 重复 排列 -网 页 默认 
background-repeat : no-repeat; 不 重复 排列 
background-repeat : repeat-x; 在 x 轴 重复 排列 
background-repeat : repeat-y; 在 y 轴 重复 排列 
background-position : 90% 90%; 背景 图 片 x 与 y 轴 的 位 置 
background-position : top; 向 上 对 齐 
background-position : buttom; 向 下 对 齐 
background-position : left; 向 左 对 齐 
background-position : right; 向 右 对 齐 

background-position : center; 居中 对 齐 
CSS- 链 接 属性 
a 所 有 超 链接 
a:link 超 链接 文字 格式 
a:visited 浏览 过 的 链接 文字 格式 
a:active 按 下 链接 的 格式 
a:hover 和 鼠标 转 到 链接 


cursor:crosshair 十 字体 

Cursor:s-resize 箭头 朝 下 
cursor:help 加 一 问号 
cUISOT:W-Tesize 行头 朝 左 
cursor:n-resize 行头 朝 上 
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( 续 表 ) 

cursor:ne-resize 箭头 朝 右 上 
cursor:nw-resize 箭头 朝 左 上 
cursor:text 文字 I 型 
cursor:se-resize 箭头 针 右 下 
cursor:sw-resize 箭头 针 左 下 
cursor:wait 漏斗 
CSS- 边 框 属性 

语言 功能 
border-top : 1px solid #6699cc; 上 框 线 
border-bottom : 1px solid #6699cc; 下 框 线 
border-left : 1px solid #6699cc; 左 框 线 
border-right : 1px solid #6699cc; 右 框 线 
solid 实 线 框 
dotted 庶 线 框 
double 双 线 框 
groove 立体 内 凸 框 
ridge 立体 浮雕 框 
inset 凹 杠 
outset 凸 杠 
CSS- 表 单 

语言 功能 
<input type="text" name="T1" size="15"> 文本 域 
<input type="submit" value="submit" name="B1"> 按钮 
<input type="checkbox" name="C1"> 复 选 框 
<input type="radio" value="V1" checked name="R1"> ”| 单 选 按钮 
Co srt 
a ee 列表 菜单 
CSS -边界 样式 

语言 功能 
margin-top:10px; 上 边界 
margin-right: 1 0px: 右边 界 值 
margin-bottom:10px; 下 边界 值 
margin-left:10px; 左边 界 值 
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课堂 实录 “ee 一 @ 
CSS- 边 框 空白 


padding-top:10px:; 上 边框 留 空白 
padding-right:10px:; 右边 框 留 空白 
padding-bottom:10px; 下 边框 留 空白 
padding-left:10px; 左边 框 留 空白 
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